响应式布局媒体查询禁止缩放浏览器默认会根据设备的尺寸将页面缩放，会影响我们的响应方案，应禁止。而且还要禁止用户手动缩

媒体查询

@media(条件句){} // 条件句配合max-width和 min-width

禁止缩放

浏览器默认会根据设备的尺寸将页面缩放，会影响我们的响应方案，应禁止。而且还要禁止用户手动缩放.

<meta name="viewport" content="width=device-width,user-scalabel=no,initial-scale=1.0,maximun-scale=1.0,minimum-scale=1.0">

REM

常用的单位有px(pixel)，em(一个m的宽度）,rem(根标签的字体宽度，即html标签) 手机有很多型号不同的宽度，而我么如何布局取决于宽度。我们有两种方案来使得布局在大多数尺寸中得到好的展效果。第一种是利用宽度百分比，这种方法能够让布局的宽度在不同宽度的手机上一相同的比例展示。但是百分比对于高度是无效的。第二种是利用REM单位获取屏幕宽度，将html的font-size设置为屏幕宽度

let width = window.innerWidth
document.write(`<style>html{font-size:${width}px}</style>`)

在实际开发中将设计稿的px单位换算为rem会有很多的小数，非常复杂。因为我们可以将html的font-size设置为1/10的宽度。或者更好的方法是利用node-sass的函数，自动将px装换为rem 安装node-sass

$ npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
$ npm install node-sass

将scss转化为css

// 将文件转化为文件
$ node-sass src/style.scss dest/style.css
// 将文件夹转化为文件夹
$ node-sass scss -o css

自定函数示例

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
div {
width:px(100)
}

**```**