響應(yīng)式設(shè)計(jì)

無論以哪種方式仍必不可少的設(shè)置Meta 標(biāo)簽

<meta name=“viewport” content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

<meta?http-equiv="X-UA-Compatible"?content="IE=Edge,chrome=1">??

[1]（user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 ）

一、百分比布局

百分比布局還原設(shè)計(jì)稿能力還是有限。

二、通過媒介查詢來設(shè)置樣式 Media Queries

根據(jù)獲取設(shè)備的大小來設(shè)置內(nèi)容的樣式
html{font-size:20px;}

@media screen and (min-width:320px){html{font-size:17.07px;}}

@media screen and (min-width:360px){html{font-size:19.2px;}}

/*當(dāng)設(shè)備處于375px的時候的他的font-size就等于（百分比數(shù)=375/20）*/

@media screen and (min-width:375px){html{font-size:20px;}}

@media screen and (min-width:412px){html{font-size:21.97px;}}

@media screen and (min-width:414px){html{font-size:22.08px;}}

假如我們要設(shè)定兼容 iPad 和iphone的視圖，那么可以這樣設(shè)置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

三、使用 Bootstrap

? <link >

三、注意px 與rem\em 的轉(zhuǎn)化

百分比數(shù)=基數(shù)/16

基數(shù)一般是10px 或者 14px

百分比=基數(shù)/10px

rem = px/基數(shù) em=px/基數(shù)

基數(shù)為10px? ? html{ font-size:10px}? ? ? ? ?1.4rem =14px/10px

基數(shù)為14px? ? html{font-size:14px }? ? ?1rem= 14px /14px

body{font-size=14px} 1em=14px /14px

4.彈性圖片

img{width:auto;max-width:100%}