Web前端基础Day18【项目】响应式

这是一个关于Web前端基础Day18【项目】响应式的思维导图，复习PC端和移动端开发、 响应式开发等。

Day18【项目】响应式

• 复习PC端和移动端开发
  • 移动端开发时主要的布局原理用的rem+js
  • rem布局原理：在不同的屏幕尺寸下，可以动态设置html元素的font-size的值，实现在不同屏幕下页面的显示效果题 引入js
  • js做了什么？ 获取了屏幕宽度，如果屏幕宽度是大于设计稿尺寸的，给html预设了一个font-size的值是100像素的，小于设计稿尺寸的时候，用屏幕宽度除以设计稿的尺寸*100,得到的结果设置给html的font-size
• 响应式开发：
  • vs code: pc：https://code.visualstudio.com/ 移动端：https://code.visualstudio.com/
  • （1）原理：会根据用户的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，实现不同屏幕分辨率的终端上浏览网页的不同展示方式
  • 2）实现步骤： - 设置viewport（视口） - 创建流式布局(百分比布局) 水平方向包含width、左右间距及边框等都采用百分比进行设置 响应式在设计和布局初期就要考虑页面如何在多终端展示，因此需要根据页面效果分析创建方便后续处理版式变化的流式布局。
  • （3）模块布局响应
    • 模块中内容：挤压－拉伸
    • 模块中内容：换行－平铺
    • 模块中内容：删减－增加
    • 模块位置的变化
    • 其中涉及到的布局技巧的应用，如：百分比布局、弹性盒、弹性网格、浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用。【尽量少使用绝对宽度】
  • （4）响应式图片的处理
    • 前景图：给图片的宽度（最大宽）设置为百分比
    • 背景图：修改background-size的值，给百分比、cover、container
  • （5） 响应式文字
    • 相对单位在字号、行高中的应用可以一定程度上提升效率精简代码 例：用相对单位：em
    • 代码演示：
      • @media screen and (orientation:landscape){ .box{ font-size:20px; line-height:1.5; } .box h2{ font-size:2em; } } @media screen and (orientation:portrait){ .box{ font-size:12px; } }
  • 屏幕区间设定
    • 大屏优先
      • @media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
      •         @media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
      •         @media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */
    • 小屏优先
      • /*超小型设备（手机，768px以下）*/
      •         @media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */
      •         @media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
      •         @media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */