vw 布局 屏幕适配 css预处理器

vh vw相对长度单位

• vw vh （viewpoint width viewpoint height）

• vw相对于屏幕的宽度 规定不管你屏幕是100px 或者200px

• vh如上

• 例：

  100vw = 320px
   1vw  = 3.2px
  

tip:

ui给我们移动端 设计稿

可以按照设计稿 做 移动端屏幕适配

里面的大部分元素（盒子 文字 图片 字体图标）都需要跟屏幕宽度变化而变化
屏幕越大 元素越大

• 屏幕适配 代码怎么敲 写什么样的宽高 才会实现效果
  （无非就是长度单位的选择） 先排除px
  • 相对长度单位 % em （相对父元素或者自己） 不常用
  • 相对长度单位vw vh rem
  • 公式 :
  • 手机屏宽 / 设置稿宽 = 手机div宽 / 设计稿div宽
    • 设计稿宽度 已知 量取
    • 手机屏宽 已知 100vw
    • 设计稿div宽 已知 量取
    • 手机中div宽 未知 计算
  • 字体 设置屏幕适配公式如上 （设计稿宽度和设计稿字体宽度测量）

代码演示

/* 使用rem + 媒体查询 进行响应式布局 */
/* 设计稿宽度750 */

// 手机宽 / 设计稿宽 =  手机div宽 / 设计稿div宽

// 手机div宽 = 手机宽 / 设计稿宽 * 设计稿div宽

// 手机div宽 =  10rem / 750  * x
@ratio : 10rem / 750;

css预编译器

• 常用的css预处理器 less sass stylus
  • 这三种语法特别相似 只要掌握了一种 另外两种相差不多
  • 作用 ： 提高开发效率 更加灵活 高效；
  • css预处理器的 执行过程：
    • 新建less文件
    • 按照less语法规范 编写 合理样式代码
    • 借助工具 将less文件 编译成 css文件
    • 网页还是像以前一样 加载css文件
  • 常用语法
    • 变量
    • 嵌套
    • 混合 mixin 函数
      • 不带参数 直接整坨代码塞进去
      • 带参数 灵活根据需求改变参数 （@参数） 【参数前使用@】
    • 导入
      • 在大型框架时才会使用

屏幕端 适配：

1. 拿到设计稿 （假设750px）
2. 自己把浏览器设定在 屏幕下 (350px)
3. 里面的元素 大小 字体 按照设计稿一样 都写px (先按设计稿改)
4. 最后 再去通过vw less技术 来挨个替换项目里面的px
   1. 使用公式
   2. 手机宽 / 设计稿宽 == 手机div宽 / 设计稿div宽
   3. @ratio ：手机宽 * 设计稿div宽 / 设计稿宽
   4. 即 @ratio ：手机宽 / 设计稿宽 * 设计稿div宽
   5. 即 @ratio ：100vw *稿宽
   6. 元素 样式 :量取的稿div宽 * @radio
   7. css文件名改为less
   8. 背景图的/符号 使用~“/” 变成字符
   9. px改成 乘上计算好的倍数 *@ratio