rem手机端 h5 （响应式）

第一步，在index.html 文件下面加如下代码，750px 是2倍设计稿 ，375px 是1倍设计稿 

响应式：

就是让网站设计能够兼容多个终端，而不用为每个终端开发一个特定的版本，它是一种对于设计的全新思维模式，我们在编写时，应当向下兼容、移动优先。响应式布局虽然能够适配不同的客户端设备，但由于兼容设备的工作量大、代码增多，会使页面加载时间变长，效率降低。

实现方法：

1. CSS3-Media Query
2. 原生js实现
3. 第三方开源框架 如flexsible.js （详细参考链接：https://www.jianshu.com/p/04efb4a1d2f8）

 

一. 使用rem作为单位

html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

给手机设置100px的字体大小; 对于320px的手机匹配是100px，其他手机都是等比例匹配; 因此设计稿上是多少像素的话，那么转换为rem的时候，rem = 设计稿的像素/100 即可;

媒体查询：

/*iphone 320px*/
@media (min-width: 310px) {
  html{
    font-size: 53.3%;
  }
}
/* 安卓 360px*/
@media (min-width:350px){
  html{
    font-size: 59.12%;
  }
}
/*iphone6 375px*/
@media (min-width: 370px){
  html{
    font-size: 62.5%;
  }
}
/*iphone 6plus  414px*/
@media (min-width: 410px) {
  html{
    font-size: 69%;
  }
}

 

二、calc基本用法

.class {width: calc(expression);}

它可以支持加，减，乘，除; 在我们做手机端的时候非常有用的一个知识点;

优点如下：

1. 支持使用 "+","-","*" 和 "/" 四则运算。

2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。

浏览器的兼容性有如下：

IE9+，FF4.0+，Chrome19+，Safari6+

如下测试代码：

我是测试calc

.calc{
    margin-left:50px;
    padding-left:2rem;
    width:calc(100%-50px-2rem);
    height:10rem;
}