以下都是自己用过的，问题挺多，担心忘了所以来总结一下，欢迎大家指点，嘿嘿
1.rem布局
说起rem,刚开始接触觉得好牛逼呀，有了它各种手机适配统统搞定，但是踩了好多坑，当时项目紧张，终于完成，第二天就告知有些手机无法适配，当时还在想啥破玩意手机辣么多问题，心塞，心塞，心塞，说正经的
刚开始用的时候我基本都是根据设计稿，手动换算成rem，之后我就用了scss,一下所有的适配我都用了scss，我觉得scss特别好，写css时候不仅速度快，而且终于不用想名字了，不用想那些各种class名字太美好了，所以给大家推荐用scss,使用它换算.(推荐可以用webstorm使用scss不用配置辣么多的环境了，虽然我最喜欢用的是sublime，轻便，webstorm一打开，再打开Ps我的电脑就彻底报废了)
1.1使用css3的媒体查询
首先rem是指相对于根元素的字体大小的单位，所以可以通过设置html的字体大小来可以控制rem的大小
@charset "utf-8";
@import "px2Rem";
@media screen and (min-width:321px) and (max-width:375px) {
html {
font-size: 12px
}
}
@media screen and (min-width:376px) and (max-width:414px) {
html {
font-size: 13px
}
}
@media screen and (min-width:415px) and (max-width:639px) {
html {
font-size: 15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
font-size: 20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
html {
font-size: 23.5px
}
}
@media screen and (min-width:800px) {
html {
font-size: 25px
}
}
@import 是scss引入scss文件的一种写法，‘px2Rem’是一个公有的scss，用来把px转换成rem,每一个scss都引入这个公有的即可，以下是设计稿为750px的写法：(为啥除以24我也忘了，几个月之前写的，但是只要是750px的设计稿就是这样，谁要是知道可以告诉我，谢谢)
除了以上这两个公有的css其余都正常写，例如以下，每次写上px都是：px2Rem（量取的px）,如下
@charset "utf-8";
@import "px2Rem";
@import "common";
#banner{
height: px2Rem(443);
width: 100%;
img{
width: 100%;
height: 100%;
}
}
#introduce{
width: 100%;
background:#f2f4f7 ;
.intro_up{
width: 100%;
height: auto;
background: url("../images/js_tc.png") no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
margin-bottom: px2Rem(11);
p{
display: flex;
display: -webkit-flex;
align-items: center;
padding: px2Rem(31) px2Rem(7.5) px2Rem(20) px2Rem(7.5) ;
border-bottom: px2Rem(2) solid #eee;
font-size: px2Rem(30);
i{
width: px2Rem(71);
height: px2Rem(49);
background: url("../images/jianjie-.png") no-repeat center center;
background-size: 100% 100%;
margin-right: px2Rem(19);
margin-left: px2Rem(34.5);
}
}
总结：这个方法适配不管是微信，还是手机目前都适配，测试过华为，oppo,iphone，ipad,中兴，型号都木有错。
1.2js动态设置html的fontsize大小
动态加载meta标签设置html的fontsize
var scale = 1 / window.devicePixelRatio;
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
document.querySelector('head').appendChild(meta);
var fontSize = document.documentElement.clientWidth/10;
document.querySelector('html').style.fontSize = fontSize +'px';
写一个共有的scss,换算px
$designWidth:750;
$remCount:10;
@function px2Rem($px){
@return $px/$designWidth*$remCount * 1rem
}
之后调用的方法就和第一个方法一样
总结：这是我最开始使用的，不管是微信端还是浏览器都是相当不错，但是后来发现对于一些oppo,中兴手机的部分型号不适配，听朋友说还有华为的p9,解决的方法就是判断，然后重新计算fontsize。
1.3淘宝的flexible.js
首先我想说的是，这里我也用了sass:
第一步：引入一个flexible.js(木有写Meta这个标签)
第二步：写一个共有的common.scss
@function px2Rem($px){
@return $px/(750/10) * 1rem
}
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
第三步：在index.scss引用common.scss(本来我准备用rem写字体大小，但是听说rem换算的字体不好看就用px吧)
@charset "utf-8";
@import "common";
*{
margin: 0;
padding: 0;
max-height: 9999999px;
}
ul{
list-style: none;
width: 100%;
height: px2Rem(100);
background: pink;
@include font-dpr(17px);
text-align: center;
line-height: px2Rem(100);
}
li{
display: inline-block;
}
article{
@include font-dpr(10px);
}
总结：这种方法的使用网上应该很多，比我详细，以上是我的方法，大同小异。
2.百分比+弹性盒布局
不管是用哪种布局我都习惯性用弹性盒布局，display:flex,我觉得相当的美好，不用一点点的去量宽度，而且可以替换浮动，也不用清除浮动，不管是PC还是移动都是不错的，有时候懒得用rem我就是用百分比+弹性盒，但是，各位请注意，兼容性问题考虑一下，弹性盒的集中兼容写法注意一下，手机端感觉是各种通用的，浏览器兼容一般，主流OK的，但是IE10以下估计完蛋。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
//垂直居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
//子元素分割
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
总结：没有辣么严格的兼容要求，这个简直棒棒哒。
3.直接使用一种标签
直接在页面写以下三句话
<meta name="viewport" content="width=640,target-densitydpi=device-dpi, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
如果设计图是640直接就把width写成了640px，然后按照设计图量取的px直接写就可以了
总结：目前自己测试的结果是没有出现不适配的，字体也写成px,相当的方便，就是只限制于宽度适配，高度会出现偏差，但是如果项目允许出现滚动条就完全不碍事，不影响布局啥的，但是如果想做h5页面那种一屏一屏的不带滚动的，不建议你使用，说好的高度有偏差，直接用百分比或者rem吧。
关于字体的显示大小，与在CSS中指定的大小不一致
说明：之前用rem做的一个项目，一个段落的字数超过了一定数量，字体的大小立马就变大了，我明明写的是16px的字体，进入比32px都大，瞬间无语了，后来可劲找，在github找到了方法，https://github.com/amfe/article/issues/10#issuecomment-305942512（这是那个人的详解）。
解决方法：
方法1.max-height：99999999999px;
方法2. text-size-adjust: none;（兼容性不好，毕竟是属于新属性）
html,body,div,span,p,i,img,a,h1,h2,h3,h4,h5,h6,dd,dl,dt,header,footer,article,ul,li{
margin: 0;
padding: 0;
max-height: 999999px;
text-size-adjust: none;
-webkit-text-size-adjust:none;
}
关于在微信端使用rem布局的时候，底部会出现内容不全面，或者滚动的时候中间内容不全面
说明：例如顶部和底部固定，中间滚动，但是在微信端，应该是页面计算了微信端固定的顶部，所以会出现底部内容不全面
解决方法：中间不写固定高度，只写margin-bottom和margin-top.
body{
display:flex;
flex-direction: column;
}
header,footer{
flex:1;
position:fixed
}
目前就这么多，其他的没想到，好久了，小菜鸟一枚，先记录下来，然后慢慢改正，完善，欢迎挑刺，毕竟我的问题太多。
