rem原理

llllll

获取视窗宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

html 根元素字体的大小 来变 

加上meta viewport标签

1rem  等于 默认的大小  

原理

移动开发适配

通过监听resize动态改变fontsize

background-size:contain

保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

使用:before的方式实现icon，一定程度上减少dom，更优雅

一般情况下，padding和border不包含在width中，定义width:100%后，再设置padding或border会增加width。

可以使用box-sizing:border-box消除影响，将padding和border包含在width中

结合sass实现动态转换rem

scss

安装：npm install node-sass

编译：node-sass a.scss b.css

生产环境当中，一般使用压缩选项。

sass --style compressed nav.sass nav.css

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

sass --watch nav.scss:nav.css

使用js动态改变font-size更好

rem与media query结合可达到动态修改font-size的效果

rem转换规则

1rem = 16px (浏览器默认font-size，可通过修改html的font-size改变大小)

移动端设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">"

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

rem介绍

使用MediaQuery两种方式

Media Query介绍

常见移动web适配方法

rem学习占坑。

12345

H5 & web app

rem & 移动端适配

rem的原理

媒体查询的语法

1rem = 浏览器默认的font-size

可以通过修改HTML根font-size， 达到修改1rem默认值

案例代码

@media screen and (max-width: 400px){
  .inner {
    width: 25%;
    height: 100px;
    background-color: blue;
  }
}
@media screen and (min-width: 401px){
  .inner {
    width: 100%;
    height: 100px;
    background-color: gold;
  }
}