移動Web開發基礎概念

2 視口 (viewport)

3 css屬性之box-sizing

1.1 解析度

以物理畫素作為基準，不同裝置的物理畫素單位大小不同

物理畫素只與裝置有關

實際開發中使用的畫素

dpr = 物理畫素 / css畫素

dpr = 2，表示1個 css 畫素用 2x2 個裝置畫素來繪製

標清屏下(standard)，乙個 css 畫素由乙個物理畫素描述，dpr = 1

高清屏下(retina)，乙個 css 畫素由 2x2 的縮小物理畫素描述，dpr = 2

縮放改變的是css畫素的大小

每英吋的物理畫素點 (對角線英吋)

ppi: pixels per inch

dpi: dots per inch

在html的head標籤內：

name

="viewport"
content
="width=device-width,initial-scale=1,user-scalable=no,maximue-sacle=1,minimum-scale=1"
>

還可以將content改為"initial-scale=1"，意思就是縮放比為1，即不縮放，只有當頁面視口與裝置寬度一致時才不會縮放，所以與上面的等價，通常情況下為了相容不同的瀏覽器，需要兩種都寫上去

3.1 回顧一下盒子模型

乙個盒子就是在頁面中所佔據的空間大小，從外層算起，margin(不可見)，下層是border，再下層是padding，最內層就是content。

該取值為預設值，盒子模式下，margin看不見，border包含了padding、content，此時增大padding，會在原來content的基礎上向外擴充套件padding，增大了盒子的佔位，該狀態下寬高屬性對應的是content的寬高。

盒子模式下，margin看不見，border包含了padding、content，此時增大padding，會在原來border的基礎向內擠壓content，盒子的佔位不會改變，該狀態下寬高對應的是border以內的寬高。

移動Web開發基礎 比例盒子

上篇在移動web開發基礎 百分比 flex布局方案中說到了比例盒子的實現，因為在移動端，需要適應各種螢幕寬度的裝置，所以我們的以及其他一些元素需要根據螢幕寬度自適應的等比例縮放，這裡就需要用到比例盒子的布局方法。接下來讓我們一起來了解下實現比例盒子的幾種方法吧！這裡會介紹四種實現方式，分別是用css...

移動web開發

1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。不同機型之間可能會略有不同，這個需要踩坑 在移動端，做動畫一律用...

移動web開發1

學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...