移动端适配 vw rem 网页划分

网页划分"/>

移动端适配 vw rem 网页划分

2021/01/09

做移动端屏幕适配

1. 解决方案 两种 ：
   1. vw 布局
   2. rem+淘宝js库 flexible.js

• rem布局
  • flexible.js
    • 淘宝团队开发的js库
    • flexible 和 flex布局 没有关系
    • head中 引入js文件
    • 打开网页 观察屏幕 宽度变化 根标签字体大小的变化
    • flexible.js的变化规律
      • 10倍根字体大小 等于 屏幕宽度
      • 10rem = 屏幕的宽度
      • 移动端屏幕适配公式
        • 手机屏幕 / 设计稿宽度 = 手机div宽 / 设计稿div宽
        • 手机屏幕 100vw 【使用vw布局】
        • 手机屏幕 10rem 【使用淘宝flexible.js 做rem布局】

网页划分

1. pc端 版心
2. 移动端 flex rem vw 流式布局 自适应布局
3. 响应式布局
   1. 用一套web代码 做到手机 电脑打开 同时 体验良好
   2. 响应式布局如何实现 （响应式布局 技术原理是什么）：媒体查询
   3. 什么是媒体查询？
      1. css布局技术 根据屏幕特性（宽高） 去加载对应的一套css代码；
      2. 语法规范
         1. 用@media 开头
         2. 媒体类型
         3. and not only 关键字
         4. （media feature） 媒体特性 必须有小括号包含

tip ：

link标签是引入css文件；

script（脚本 代码的意思）标签 引入js代码