响应式页面和手机端页面总结

1.响应式页面（响应式就是媒体查询）

• 响应式页面就是随着浏览器的大小的改变，页面的样式（特别是布局）进行相应调整的页面。可以针对一套HTML呈现不同的样式，比如PC端和手机端。
• 但在实际情况下，响应式页面应用并不多（面试多），主要应用在一些交互操作较少的新闻阅读网站，实际情况针对PC和手机可以采用以下方案。
  1.PC和手机端分隔，分别访问不同的网址，手机访问PC的网址会直接跳转到手机的网址（后端实现）（淘宝）
  2.同一个域名，根据访问设备的不同，返回不一样的HTML和CSS（后端实现）

响应式页面就是媒体查询

根据媒体设备宽度显示不同的样式

/* 屏幕宽度在321px-375px之间背景为红色 */
@media (min-width: 321px) and (max-width:375px){
  body{
    background: red;
  }
}

或者

注意手机端：

1. 不可放大缩小，要加上meta:vp，
2. 没有hover事件，有touch事件
3. 没有滚动条

2.手机端页面

• 手机的屏幕尺寸不同，网页的尺寸不能写死，所有手机端的页面都一样，只是大小不同。
• 手机端页面主要两种方法：1.百分比布局 2.动态rem

百分比布局

尺寸全部采用百分比和calc()，但是无法实现所有元素按比例缩放，因为百分比在width上有效，在height上无效，高度无法与之配合 。适合对height要求低的场景。

动态Rem

1 rem = 根元素html的font-size(默认值16px/可显示最小值12px)
使用JS动态获取页面的宽度pageWidth，然后设置根元素html的font-size值（也就是设置rem值）
一般设置1rem = 0.1pageWidth = 10 vw (100vw就是视口的宽度)，可防止rem<12px

页面元素的宽高设置为rem单位，可以根据屏幕大小自动调整。
rem可以与其他单位同时存在，font-size和border设置px即可

在scss中自动将px转换成rem

1.安装编译工具node-sass
2.执行 node-sass -wr scss -o css ，编辑 scss 文件就会自动得到 css 文件
3.在scss文件里添加

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

$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一，就杀死设计师，换个新的。

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}