以下都是自己用過的荷腊，問題挺多，擔(dān)心忘了所以來總結(jié)一下悄窃，歡迎大家指點(diǎn)讥电，嘿嘿
1.rem布局
說起rem,剛開始接觸覺得好牛逼呀，有了它各種手機(jī)適配統(tǒng)統(tǒng)搞定轧抗，但是踩了好多坑恩敌，當(dāng)時(shí)項(xiàng)目緊張，終于完成横媚，第二天就告知有些手機(jī)無(wú)法適配纠炮，當(dāng)時(shí)還在想啥破玩意手機(jī)辣么多問題，心塞灯蝴，心塞恢口，心塞，說正經(jīng)的
剛開始用的時(shí)候我基本都是根據(jù)設(shè)計(jì)稿穷躁，手動(dòng)換算成rem耕肩，之后我就用了scss,一下所有的適配我都用了scss，我覺得scss特別好问潭，寫css時(shí)候不僅速度快猿诸，而且終于不用想名字了，不用想那些各種class名字太美好了睦授，所以給大家推薦用scss,使用它換算.(推薦可以用webstorm使用scss不用配置辣么多的環(huán)境了两芳，雖然我最喜歡用的是sublime摔寨，輕便去枷，webstorm一打開，再打開Ps我的電腦就徹底報(bào)廢了)
1.1使用css3的媒體查詢
首先rem是指相對(duì)于根元素的字體大小的單位，所以可以通過設(shè)置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’是一個(gè)公有的scss竖螃，用來把px轉(zhuǎn)換成rem,每一個(gè)scss都引入這個(gè)公有的即可，以下是設(shè)計(jì)稿為750px的寫法：(為啥除以24我也忘了逗余，幾個(gè)月之前寫的特咆，但是只要是750px的設(shè)計(jì)稿就是這樣，誰(shuí)要是知道可以告訴我录粱，謝謝)
除了以上這兩個(gè)公有的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);
}
}
總結(jié)：這個(gè)方法適配不管是微信啥繁，還是手機(jī)目前都適配菜职，測(cè)試過華為，oppo,iphone旗闽，ipad,中興酬核，型號(hào)都木有錯(cuò)。
1.2js動(dòng)態(tài)設(shè)置html的fontsize大小
動(dòng)態(tài)加載meta標(biāo)簽設(shè)置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';
寫一個(gè)共有的scss,換算px
$designWidth:750;
$remCount:10;
@function px2Rem($px){
@return $px/$designWidth*$remCount * 1rem
}
之后調(diào)用的方法就和第一個(gè)方法一樣
總結(jié)：這是我最開始使用的适室，不管是微信端還是瀏覽器都是相當(dāng)不錯(cuò)嫡意，但是后來發(fā)現(xiàn)對(duì)于一些oppo,中興手機(jī)的部分型號(hào)不適配，聽朋友說還有華為的p9,解決的方法就是判斷捣辆，然后重新計(jì)算fontsize蔬螟。
1.3淘寶的flexible.js
首先我想說的是，這里我也用了sass:
第一步：引入一個(gè)flexible.js(木有寫Meta這個(gè)標(biāo)簽)
第二步：寫一個(gè)共有的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(本來我準(zhǔn)備用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);
}
總結(jié)：這種方法的使用網(wǎng)上應(yīng)該很多促煮，比我詳細(xì)，以上是我的方法整袁，大同小異菠齿。
2.百分比+彈性盒布局
不管是用哪種布局我都習(xí)慣性用彈性盒布局，display:flex,我覺得相當(dāng)?shù)拿篮米迹挥靡稽c(diǎn)點(diǎn)的去量寬度绳匀，而且可以替換浮動(dòng)，也不用清除浮動(dòng)炸客，不管是PC還是移動(dòng)都是不錯(cuò)的疾棵，有時(shí)候懶得用rem我就是用百分比+彈性盒，但是痹仙，各位請(qǐng)注意是尔，兼容性問題考慮一下，彈性盒的集中兼容寫法注意一下开仰，手機(jī)端感覺是各種通用的拟枚，瀏覽器兼容一般薪铜，主流OK的，但是IE10以下估計(jì)完蛋恩溅。
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;
總結(jié)：沒有辣么嚴(yán)格的兼容要求隔箍，這個(gè)簡(jiǎn)直棒棒噠。
3.直接使用一種標(biāo)簽
直接在頁(yè)面寫以下三句話
<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">
如果設(shè)計(jì)圖是640直接就把width寫成了640px脚乡，然后按照設(shè)計(jì)圖量取的px直接寫就可以了
總結(jié)：目前自己測(cè)試的結(jié)果是沒有出現(xiàn)不適配的蜒滩，字體也寫成px,相當(dāng)?shù)姆奖悖褪侵幌拗朴趯挾冗m配奶稠，高度會(huì)出現(xiàn)偏差俯艰，但是如果項(xiàng)目允許出現(xiàn)滾動(dòng)條就完全不礙事，不影響布局啥的锌订，但是如果想做h5頁(yè)面那種一屏一屏的不帶滾動(dòng)的蟆炊，不建議你使用，說好的高度有偏差瀑志，直接用百分比或者rem吧涩搓。
關(guān)于字體的顯示大小，與在CSS中指定的大小不一致
說明：之前用rem做的一個(gè)項(xiàng)目劈猪，一個(gè)段落的字?jǐn)?shù)超過了一定數(shù)量昧甘，字體的大小立馬就變大了，我明明寫的是16px的字體战得，進(jìn)入比32px都大充边，瞬間無(wú)語(yǔ)了，后來可勁找常侦，在github找到了方法浇冰，https://github.com/amfe/article/issues/10#issuecomment-305942512（這是那個(gè)人的詳解）。
解決方法：
方法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;
}
關(guān)于在微信端使用rem布局的時(shí)候肘习，底部會(huì)出現(xiàn)內(nèi)容不全面，或者滾動(dòng)的時(shí)候中間內(nèi)容不全面
說明：例如頂部和底部固定坡倔，中間滾動(dòng)漂佩，但是在微信端，應(yīng)該是頁(yè)面計(jì)算了微信端固定的頂部罪塔，所以會(huì)出現(xiàn)底部?jī)?nèi)容不全面
解決方法：中間不寫固定高度投蝉，只寫margin-bottom和margin-top.
body{
display:flex;
flex-direction: column;
}
header,footer{
flex:1;
position:fixed
}
目前就這么多，其他的沒想到征堪，好久了瘩缆，小菜鳥一枚，先記錄下來佃蚜，然后慢慢改正庸娱，完善着绊，歡迎挑刺，畢竟我的問題太多涌韩。
