一、viewport視口
1.1什麼是螢幕尺寸、螢幕解析度、螢幕畫素密度？
螢幕尺寸：指螢幕的對角線的長度，單位是英寸，常見的螢幕尺寸有3.5、3.7、4.2、4.7、5.0、5.5、6.0等。
螢幕解析度：指在橫縱向上的畫素點數，單位是px，1px=1個畫素點。一般以縱向畫素*橫向畫素來表示一個手機的解析度，如1920*1080。（這裡的1畫素指的是物理裝置的1個畫素點）
螢幕畫素密度：螢幕上每英寸可以顯示的畫素點的數量，單位是ppi。螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高，畫素密度越大，反之越小。
iPhone 3GS和iPhone 4對比。螢幕尺寸一樣，螢幕解析度相差一倍，螢幕畫素密度也相差一倍。
計算畫素密度的公式：
在早先的移動裝置中，螢幕畫素密度都比較低，如iphone3解析度為320x480，在iphone3上，1畫素是等於一個螢幕物理畫素。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司推出了Retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，1畫素是等於兩個物理畫素。
這是描述物理性質的一個數值，表示計算機螢幕橫向有1366個畫素髮光點，縱向有768個畫素點。
畫素是構成數碼影像的基本單元，通常以畫素每英寸PPI為單位來表示影像解析度大小。
上網的時候看網頁，物理解析度和網頁呈遞的效果，息息相關。
對於同一個網頁，不更改字號的情況，解析度越大，同樣字號看著越小。
把計算機解析度調大，設為1366*768，此時網頁旁邊的留白很多。
如果這個事，在手機上也是遵循同樣的規則，那壞了，手機螢幕的解析度，驚人的大。
|
iPhone8的解析度1334*750 iPhone8 Plus解析度1920*1080 三星S8的解析度2960*1440 小米6的解析度1920*1080 |
做一個網頁，頁面上放一個1000px的盒子，放置了h1和p，都是預設字號，會發現h1哪像h1啊？
寫一個測試語句：手機認為自己的螢幕寬度是980px，注意這個數值，不是解析度。
|
document.getElementsByTagName('h2')[0].innerHTML=document.documentElement.clientWidth; |
現在，這個980是什麼？為什麼不是手機的解析度，這是預設視口的寬度。
視口（viewport）是手機web製作非常重要的概念，發明人是賈伯斯，賈伯斯預見到一件事，就是手機的螢幕會越來越清晰，PPI（每平方英寸的畫素數，畫素密度）會越來越大。此時如果手機按照自己的解析度去渲染網頁，頁面上的文字將不可讀，20px的文字看不清。所以，手機不能認為自己的寬度是自己的解析度！賈伯斯說，每個手機可以由工程師自由的設定“顯示解析度”，起名叫“視口”。也就是說，手機在視口中呈遞頁面，而不是解析度的物理視窗。視口中1px等於真實物理的多個px。賈伯斯說，預設視口980px，因為980px是實世界上絕大多數網頁的版心。此時剛剛好能夠卡住它們，像在3000米的高空俯視整個頁面。但是，賈伯斯還說，前端工程師必須能夠自己設定。
寫一個meta標籤：此時手機認為自己的視口是device-width（當前裝置）的視口寬度
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width 設定layout viewport 的寬度，為一個正整數，或字串"device-width" initial-scale 設定頁面的初始縮放值，為一個數字，可以帶小數 minimum-scale 允許使用者的最小縮放值，為一個數字，可以帶小數 maximum-scale 允許使用者的最大縮放值，為一個數字，可以帶小數 height 設定layout viewport 的高度，這個屬性對我們並不重要，很少使用 user-scalable 是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許||IOS10 無效 |
此時手機會認為自己的視口是500px寬，稱這條語句“約束視口”
|
<meta name="viewport" content="width=500px, user-scalable=no, initial-scale=1.0" /> |
此時頁面文字變大了。
小米螢幕的物理解析度橫向1080個畫素，而現在手機認為自己是500px的寬度，所以一個視口px等於2.16真實px。
把所有裝置都約束為固定的視口寬度，不合理！比如小米6的解析度是1080，約束為500。iPhone8的解析度750，頁面約束為500，此時iPhone8的視口解析度1px等於真實解析度1.5px，加上iPhone8手機本來就小，iPhone8中的h1看的感覺要比小米6小，所以iPhone8應該認為自己有更小的視口，比如360，可以增加點視口，此時大家的h1不都一樣了嗎？
賈伯斯規定，所有的手機出廠的時候，就有一個裝置的補償視口寬度。叫做“出廠視口”，此時這個裝置將在出廠的時候寫入一個視口寬度，這個寬度下看網頁，h1和h1感覺一致
|
出廠視口 |
品牌 |
|
320 |
iPhone4、iPhone5 |
|
360 |
華為P9，小米5、6等等 中國國產的手機一律都是360，實際上不合理。 |
|
375 |
iPhone6、iPhone7、iPhone8 |
|
414 |
iPhone6 plus、iPhone7 plus、iPhone8 plus |
完整的meta設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
視口的值不要背，面試的時候也不用考，因為視口就是為了遮蔽手機和手機的不同而設定的值。視口的值，每個手機不一樣，正是因為手機和手機視口值不一樣，才讓手機看到的14px文字的感覺是一樣的。
視口的最終目的：遮蔽手機的尺寸、畫素密度差異，讓任何手機中的文字看起來一樣大。
當你不寫meta的時候，此時視口980。寫了就是出場視口。就是320、360、414等等…… 永遠都得不到解析度。
1.2物理畫素和裝置獨立畫素
window物件有一個devicePixelRatio屬性，它可以得到裝置物理畫素和裝置獨立畫素的比例，也就是 devicePixelRatio = 物理畫素 / 獨立畫素。
CSS中的px就可以看作是裝置的獨立畫素，所以通過devicePixelRatio可以知道該裝置1px代表多少個物理畫素。例如，在Retina屏的iphone上，devicePixelRatio值為2，也就是說1px相當於2個物理畫素。
iPhone6螢幕解析度是1334*750px，所以係數是2x。那device-width就等於750/2=375px。
iPhone6 Plus螢幕解析度是2208*1242px，所以係數是3x。那device-width就等於1242/3=414px。
二、移動端百分比佈局
2.1移動端頁面沒有版心
手機web頁面沒有版心，都是撐滿的，因為：
1、手機本身就小，如果再留白，寸土寸金的地方就浪費
2、APP也是撐滿的，使用者手機上網的時候，也希望能看到更多的內容，所以撐滿。
|
|
|
|
|
此時沒有版心，都是100%，就會給製作帶來難度，因為尺寸不能寫px單位了，如果版心設定為360px，此時iPhone7 plus的414視口會看見留白。
|
|
|
2.2百分比佈局
用百分比佈局設定寬度、高度（絕大多數高度可以用px）、padding、margin的佈局。叫做流式佈局，頁面有彈性，所以也叫彈性佈局：
|
|
|
|
下面講解基本功：
|
<body> <div></div> → div是body的親兒子，60%指的是視窗寬度的60% </body> |
|
<body> <div> <p></p> → 60%指的是div的width的60%，無視div的padding。 </div> </body> |
小題目：
|
<div> <p></p> </div> div{width:600px;padding-left:100px;} p{width:50%;} |
請問p多寬？此時p應該是300px寬度，因為無視父親的padding。
看看padding，都參考父親的width。注意，豎直方向上的padding也是看父親的width，而不是height。
|
<div> <p></p> → padding-left:10%;指的是父親的width的10%，而不是父親的padding。 padding-top:10%;指的是父親的width的10%，而不是父親的height。 </div> |
小題目：
<div> <p></p> </div> div{ width:800px; padding-left:400px; padding:153px 234px 341px; } p{ width:50%; height:100px; padding-left:10%; paading-right:10%; padding-top:10%; padding-bottom:10%; }
請畫出p此時的盒模型圖。
div的padding是逗你的，因為壓根沒用，兒子的padding-left如果用百分比寫，表示的仍然是父親的width屬性的百分之多少。兒子的padding-top和padding-bottom也是參考父親的width，所以答案：
小題目：
|
<div> <p></p> <p></p> </div> |
div{ width: 794px; height: 200px; border: 1px solid #000; padding: 124px 34px 34px 23px; } p:nth-child(1){ float: left; width: 30%; padding: 10% 20% 30%; height: 50px; background-color: orange; } p:nth-child(2){ float: left; width: 30%; height: 50px; background-color: blue; }
請問藍色盒子和橙色盒子是否能夠浮動成功，是否能夠並排顯示。
答案： 計算1號p，總寬度是30% + 20% + 20% = 70%。 2號p總寬度30%，剛好能並排。
再來看margin，一律參考父親width，不參考父親的margin和height。
div{ width: 200px; height: 600px; border: 10% solid #000; } p{ margin: 10%;}
總結：無論margin、padding、width、height，無論豎直方向還是水平方向，參考的都是父親的width。
2.3 calc()函式
calc()的運算規則
calc()使用通用的數學運算規則，但是也提供更智慧的功能：
使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表示式中有“+”和“-”時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表示式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
border不能用百分比寫。所以會帶來麻煩：
|
border: 10% solid #000; |
|
<div> <p>1</p> float: left;width:50%; border:1px solid red <p>2</p> float: left;width:50%; border:1px solid red </div> |
p就不能浮動成功，因為總寬度已經是100%，又多了4個px。
此時邊框不能寫成百分百，所以就不好減。
div{ width: 500px; height: 300px; background: orange; } div p{ width: 50% /*這裡不能輕鬆減去2px*/ height: 200px; float: left; background: green; border:1px solid #000; }
但是CSS3中新增的calc函式能：
div{ width: 500px; height: 300px; background: orange; } div p{ width: calc(50% - 2px); /*css3中新增了calc函式*/ height: 200px; float: left; background: green; border:1px solid #000; }
使用的時候一定要在運算子前後加上空格：
|
calc(50%-2px); |
正確的應該是：
|
calc(50% - 2px); |
對於相容性不好的瀏覽器，要加字首：
|
width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - (10px + 5px) * 2); width:calc(100% - (10px + 5px) * 2); |
相容性不好，至少安卓4.4還不是特別相容。
2.4 CSS3新的盒模型（盒子內減）
之前的盒模型padding、border、都是外擴的。
在CSS3中新新增一個屬性box-sizing:border-box;盒子最終的大小都是以width和height為準，padding和border不會影響盒子大小。
|
box-sizing:border-box; 盒子內減模式 |
div{ width: 200px; height: 200px; padding:10px 20px 30px 40px; border:10px solid #ccc; background: orange; }
此時真實的面積：280*260
div{ width: 200px; height: 200px; padding:10px 20px 30px 40px; border:10px solid #ccc; background: orange; box-sizing:border-box; }
加上內減屬性後，此時padding和border是內減的，而不是外擴。
小題目：
|
<div> <p></p> <p></p> </div> |
兩個p能否並排：
div{ width: 800px; height: 300px; border: 1px solid #000; } p:nth-child(1){ float: left; width: 500px; height: 300px; background: blue; padding: 21px 33px 44px 11px; box-sizing:border-box; → width：500px涵蓋了padding和border了 border:3px solid red; border-right:4px solid black; } p:nth-child(2){ float: left; width: 300px; height: 300px; background: orange; padding: 14px 22px 17px 21px; box-sizing:border-box; → width：300px涵蓋了padding和border了 border:5px solid red; border-right:4px solid black; }
小案例：響應佈局
div{ width:80%; height:100px; margin:0 auto; background-color:#111; padding:10px; padding-right:0px; } div p{ float: left; width:33.3333333%; height:100px; background-color:deeppink; border-right:10px solid #111; box-sizing:border-box; }
小題目：div裡面一個p
div{ width:600px; height: 200px; padding:50px; box-sizing:border-box; } p{width:50%;height: 200px;}
P的寬度是250px因為父親有box-sizing:border-box;屬性，內減了padding:50px，兒子參考的是父親真實能用的面積的百分比（500px）.
2.5最大和最小限定
|
width:80%; max-width:800px; /*限定最大縮放寬度為800*/ min-width:400px; /*限定最小縮放寬度為400*/ |
超過這個範圍，百分百就不再縮放了。
2.6固比固
思考一個案例：有三個盒子並排撐滿父親，兩邊的盒子固定120px，中間的盒子撐滿剩餘部分。
難點就是中間的盒子百分百，寫啥都不對，因為它不知道去掉240px之後，佔父親多少百分比。
|
width:calc(100% - 240px); |
三、高度的等比變化
難度主要在參考值不統一，width參考是父親的width，height參考父親的height。
3.1插入圖片法
一般來說，需要高度等比例變化的盒子，都是攜帶圖片的，因為不希望圖片變形，所以盒子要等比例變化。
而img標籤天生具有等比例的性質。盒子約束圖片的寬度，圖片反著影響盒子的高度。
比如現在要製作三個1:1:1的盒子並排，並且他們的寬高比都是1:1，也就是正方形。
<div> → width:80%; overflow:hidden; padding-left:5px; <p> → float:left;width:33.33%;border-right: 5px <img src="images/yangyang.png" > → width:100%;height:auto; </p> <p> → float:left;width:33.33%;border-right: 5px <img src="images/liyifeng.png"> → width:100%;height:auto; </p> <p> → float:left;width:33.33%;border-right: 5px <img src="images/xiaoming.png"> → width:100%;height:auto; </p> </div>
div{ width: 80%; margin: 0 auto; border: 1px solid #000; overflow: hidden; padding-left: 6px; box-sizing:border-box; } div p{ float: left; width: 33.3333%; border-right: 6px solid white; box-sizing:border-box; } div p img{ width: 100%; height: auto; }
現在升級：
div p:nth-child(1){ width: 66.666%; border-right: 1px solid black; } div p:nth-child(2){ width: 33.333%; border-bottom: 1px solid black; } div p:nth-child(3){ width: 33.333%; }
圖片撐高了盒子，盒子本身沒有高度，盒子的高度相當於是圖片的高度加1px邊框，即使寫了border-box也沒用也是圖片的高度加1px邊框。
3.2 padding法將圖片放在padding裡面
豎直方向的padding參考的是父親的width，padding的參考和width的參考統一了，所以就能夠製作高度等比例變化的盒子了！
盒子的高度是0，全靠padding來撐！
比如製作三個並排，每個盒子寬高比1:1的盒子此時：
|
float: left; width: 33.333%; height: 0px; padding-top: 33.333%; |
比如製作五個並排，每個盒子寬高比2:1的盒子此時
|
float: left; width: 20%; padding-top: 10%; height: 0px; |
padding法也可以插img，但是img要在height為0的容器中，所以img必須絕對定位，飄在父親的padding中。
div p{ float: left; width: 33.333%; padding-top: 33.333%; height: 0px; border-right: 1px solid #000; box-sizing:border-box; position: relative; } div p img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
升級：
div{ width: 80%; overflow: hidden; border: 1px solid #000; margin:10px auto; } div p:nth-of-type(1){ width: 66.666%; padding-top: calc(66.6666% + 10px); border-right:5px solid #000; } div p:nth-of-type(2){ border-bottom:10px solid #000;} div p{ float: left; height:0; width: 33.333%; padding-top:33.3333%; box-sizing:border-box; position: relative; } div p img{ position: absolute; top:0; left:0; width: 100%; height: 100%; }
四、CSS3彈性盒模型
4.1彈性盒佈局屬性display:box;和display:flex;
注意：設為flex佈局後，子元素的float、clear、vertical-align屬性將失效。
需求：讓三個盒子並排，撐滿父親，而且它們的寬度是1:2:3，此時一個專門設定width？
解：總份數1+2+3等於6，所以一份就是100/6 = 16.6666%，所以應該：16.6666%、33.3333%、50%
再來一個盒子，四個盒子並排撐滿父親，比例是：1:2:6:3
解：總份數是12，是一樣一份是8.333333333333334.答案：8.3333%、16.66%、50%、25%
CSS3中新推出一個屬性，彈性盒容器：
|
display:box; display:-webkit-box; |
<div> → display:-webkit-box; 此時這個div就是彈性盒容器，裡面的親兒子自動浮動 <p>1</p> → -webkit-box-flex:1; 佔1份 <p>2</p> → -webkit-box-flex:2; 佔2份 <p>3</p> → -webkit-box-flex:6; 佔6份 <p>4</p> → -webkit-box-flex:3; 佔3份 </div>
注意：當div設定display:box;的時候，兒子自動會並排，兒子不要寫浮動，寫了反而出錯。
瀏覽器會自動檢測總份數，每個份數佔多少百分比，不用計算百分比是多少，這個屬效能顛覆百分比的寫法。
CSS中從此可以不寫百分比，並且這個屬性足夠魯棒，margin和padding、border也能自動減去。
但是這個屬性相容性不好，因為是新出的屬性，安卓4.4才開始相容。
實際上這個屬性還要一個分支，就是display:flex;
要加字首：這個屬性的哲學就是可以自由的設定元素在容器中的排列形式。
|
display:flex; display:-webkit-flex; |
相容寫法：
|
display:box; display:-webkit-box; display:flex; display:-webkit-flex; |
基本使用：
<div> → display:flex; <p>A</p> → flex:1; 不要寫浮動！！ <p>B</p> → flex:2; 不要寫浮動！！ <p>C</p> → flex:2; 不要寫浮動！！ <p>D</p> → flex:1; 不要寫浮動！！ </div>
4.2父級容器屬性
●flex-direction屬性
該屬性可以設定方向（即子專案的排列方向）。
|
.box { flex-direction: row | row-reverse | column | column-reverse; } |
|
1 row（預設值）：主軸為水平方向，起點在左端。 2 row-reverse：主軸為水平方向，起點在右端。 3 column：主軸為垂直方向，起點在上沿向下。 4 column-reverse：主軸為垂直方向，起點在下沿向上。 |
div{ width: 800px; height: 400px; margin:10px auto; border: 1px solid #000; display:flex; flex-direction:row-reverse; }
●flex-wrap屬性
預設情況，專案都排在一條線（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
|
.box{ flex-wrap: nowrap | wrap | wrap-reverse; } |
|
1 nowrap（預設）：不換行。 2 wrap：換行，第一行在上方。 3 wrap-reverse：換行，第一行在下方。 |
●flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
|
.box { flex-flow: <flex-direction> || <flex-wrap>; } |
|
flex-flow:row-reverse wrap; |
●justify-content屬性
justify-content屬性定義了專案在主軸上的對齊方式
|
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } |
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
|
1 flex-start（預設值）：左對齊 2 flex-end：右對齊 3 center： 居中 4 space-between：兩端對齊，專案之間的間隔都相等。 5 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 |
●align-items屬性
align-items屬性定義專案在交叉軸上如何對齊。
|
.box { align-items: flex-start | flex-end | center | baseline | stretch; } |
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
|
1 flex-start：交叉軸的起點對齊。 2 flex-end：交叉軸的終點對齊。 3 center：交叉軸的中點對齊。 4 baseline: 專案的第一行文字的基線對齊。 5 stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。 |
●align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
|
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } |
|
1 flex-start：與交叉軸的起點對齊。 2 flex-end：與交叉軸的終點對齊。 3 center：與交叉軸的中點對齊。 4 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。 5 space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 6 stretch（預設值）：軸線佔滿整個交叉軸。 |
4.3子級專案屬性
●order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
|
.item { order:1; } |
●flex-grow屬性
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
如果所有專案的flex-grow屬性為1，則它們將等分剩餘空間（如果有的話）。
如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
|
.item { flex-grow: <number>; /* default 0 */ } |
●flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。(數值越大壓縮的越厲害)
|
.item { flex-shrink: <number>; /* default 1 */ } |
●flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
|
.item { flex-basis: <length> | auto; /* default auto */ } |
●flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
|
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } |
|
.item { flex: 1//平分剩餘的部分 } |
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
●align-self屬性
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
|
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } |
4.4多行文字溢位自動顯示的省略號
/*溢位隱藏*/ overflow: hidden; /*溢位顯示省略號*/ text-overflow:ellipsis; /*必須是彈性盒模型*/ display:-webkit-box; /*設定行數是5行*/ -webkit-line-clamp:5; /*垂直排列*/ -webkit-box-orient:vertical;
五、rem單位
注意：瀏覽器預設的字號大小是16px。
em是相對單位，相對於父親的字號的多少倍。
em是相對單位，相對於父親的字號的多少倍。
|
<div> → 字號20px <p></p> → 字號2em ， 也就是字號40px </div> |
em是相對單位，比如下面的div、p都設定2em，表示的字號卻不一樣大：
|
<body> → 字號20px 文字 <div> → 字號2em ， 也就是字號40px 文字 <div>文字</div> → 字號2em ， 也就是字號80px </div> </body> |
CSS3中新增了rem單位，是相對單位，相對於html根元素的字號大小的多少倍。
rem被中國人開發出來可以做移動端，方法就是用rem寫一切的單位，多用於移動端佈局。
rem使盒子能夠有彈性的感覺，原理：螢幕寬度是設計稿的多少倍，就要設定html字號基準字號是多少倍
|
html{ font-size:75px; } |
這個數值一旦確定了，不要輕易改，因為後面所有的數值都以這個75px基準來算rem的值。
動態設定視口和rem單位
var dpr = 1 / window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+dpr+'" />'); var W = document.documentElement.clientWidth / 10; document.getElementsByTagName('html')[0].style.fontSize = W + 'px';
六、手機web製作其他事項
6.1移動端的字型
移動端web中的字型，不用去設定，移動端的字型都會自動根據當前裝置的系統進行替換，比如iPhone手機會自動換成蘋方字型，安卓系統會使用思源。
6.2移動端常用meta和link
http://blog.csdn.net/faremax/article/details/70241877
6.3圖片
手機中的圖片一般都要縮小2倍~3倍使用，這樣可以充分利用手機的高清螢幕，讓圖片更清晰。比如，上螢幕的圖片是60*60，原圖就要有120*120以上。
因為視口比如360，真實手機解析度是1080，大約2~3倍。也就是說你的視口1px，實際物理畫素2~3個畫素點，所以圖片能夠顯示更清晰。
當你現在的盒子高度是固定尺寸的，並不需要等比例變化，此時精靈圖片一般都是用到的尺寸2.0倍，這是為了好算。
七、fillpage.js
使用說明：
①引入外掛檔案，這個外掛依賴於jQuery，所以你還需要下載jQuery，並且在Fullpage外掛之前引入。
<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /> <script src="/fullpage/jquery.min.js"></script> <script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>
如果你需要自定義頁面滾動的效果，你需要引入jquery.easings.min.js檔案。
|
<script src="/fullpage/jquery.easings.min.js"></script> |
②編寫HTML程式碼
<div id="fullpage'"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
假如你需要讓某一個section作為首頁的第一屏展示，你只需要給這個section新增一個active的類，Fullpage會自動優先展示這個螢幕，例如定義下面的程式碼：
|
<div class="section active">Some section</div> |
Fullpage自帶左右滑動的幻燈片，只需要在section中新增DIV元素，並且給DIV元素新增slide類，FUllpage會自動生成幻燈片特效，例如下面的程式碼：
<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>
③初始化Fullpage
使用jQuery的文件載入完畢以後執行函式，初始化Fullpage外掛。
|
$(document).ready(function() { $('#fullpage').fullpage(); }); |
八、注意事項
移動端初始化meta：
<meta name="viewport" content="width=device-width, initial-scale=1" id="viewport" /> <!-- 是否啟動webapp功能，會刪除預設的蘋果工具欄和選單欄。 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 這個主要是根據實際的頁面設計的主體色為搭配來進行設定。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略頁面中的數字識別為電話號碼,email識別 --> <meta name="format-detection" content="telephone=no, email=no" /> <!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用相容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app">
移動端注意事項：
1、樣式初始化要使用移動端初始化。
2、無需設定字型成微軟雅黑或平方，因為每個手機系統的字型都不同。
3、盒子水平方向的儘量都使用寬度百分比佈局。
4、並列模組中間的邊框，儘量用偽標籤，並且定位。
5、移動端網頁一定要有視口標籤。（我們通過JS建立）
Safari(還有些webkit android手機瀏覽器)會自動對看起來像是電話號碼的數字串（包括已經加入連字元或括號格式化過的）新增電話連結，點選之後會詢問使用者是否想要撥打該號碼。
如需要
<a href="tel:12345678901">電話</a>
<a href="mailto:978442663@qq.com">郵箱</a>