移动端屏幕分辨率rem,less

谷歌模拟器：能直接看到移动端效果

屏幕分辨率 

右键电脑桌面 ，点击显示设置

PC端是逻辑分辨率，移动端代码也是参考逻辑分辨率

 

网页端宽度和逻辑分辨率尺寸相同

手机屏幕尺寸不同，网页宽度均为 100%

所以就需要添加视口标签：显示 HTML 网页的区域，用来约束 HTML 尺寸

其中包含 name 和 content 属性

 

打开 本地 web 服务器，则可以看到 网页宽度 和 移动端网页逻辑分辨率宽度一样

 

二倍图：

• 设计稿里面每个元素的尺寸的倍数

• 作用：防止土拍你在高分辨率名目下模糊失真

• 一般参考 iphone6/7/8设计，其分辨率是 375，所以二倍图是 750

 

适配方案 (两种）

1. 宽度适配：宽度自适应（一般是 pc 端网页制作）
   百分比布局
   Flex布局
2. 等比适配：宽高等比缩放（移动端）
   rem
   vw

rem ： 手机屏幕大小不同，网页元素宽高等比例缩放

• rem单位，是相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1 rem = 1 HTML 字号大小

 1.手机屏幕大小不同，分辨率不同，如何设置不同HTML标签字号

• 媒体查询（检测视口宽度，然后编写差异化的 CSS样式。某个条件成立，执行对应CSS样式）
• @media（媒体特性）{
  选择器 {
     CSS属性
  }
  }

 2.设备宽度不同，HTML标签字号设置多少合适？ 

• rem布局中，HTML标签的字号为视口宽度的 1/10

只有检测到屏幕分辨率（小括号里的条件满足）是 375，才会执行大括号中的 代码

 rem布局中，HTML标签字号为视口宽度的 1/10

手机分辨率多种多样，如果要根据每种手机分辨率来写 HTML字号太麻烦。
可以使用 flexible.js，那么就可以根据不同分辨率的移动端加上不同的根字号而不用自己写了

 将设计稿中的 px 转换为 rem，以便适配移动端

在引入了 flexible.js的移动端网页，直接右键检查从元素中获取

less：

• 在less中书写样式，保存之后直接能生成同样的 css 文件
• 支持除法，能计算出结果，将 px 转换为 rem
• 在less中嵌套选择器，相应的 css中能直接 写出后代选择器

 

• 因为 shift+alt+a也是打开截图的快捷键，所以在设置中将该注释快捷键修改下
• 单行注释无法写到 css 文件，因为 css不支持 // 的写法

双击修改块注释快捷键

 

less运算

less嵌套: &写到谁里边就表示谁

less变量 (@变量名作为属性值）

less导入

less导出

• // out : . / index.css 将现在代码所在的 less文件在当前文件夹中导出并且改名为 index.css
• // out : . /css / 将现在代码所在 less 文件 在当前文件夹中新建一个文件夹，并导出在该文件夹中
• // out : . /mycss/index.css 将现在代码所在 less 文件当前文件夹中新建一个文件夹 mycss，并将代码文件改名 index.css并导入其中

less禁止导出（也就是less在保存的时候不生成 css 文件）