瀏覽器上 用來顯示網頁的那部分區域了
1、設定
view 有
init-scale 頁面的初始縮放值 為數字
width viewport的寬度
height viewport的高度
mininum-scale 允許使用者縮放最小值
maxinum-scale 允許使用者縮放最大值
user-scalable 是否允許使用者進行縮放
使用rem方案可以做到適配不同螢幕解析度的原理:
設計稿的畫素/html(font-size)=css中的代替px 由於html(font-size)這一部分是根據螢幕的寬度(**查詢可以得到螢幕的寬度)在css內容來動態改變的。
使用css 能在不同的條件下使用不同的樣式,是頁面最終在不同的終端裝置達到不同的渲染效果
@media **型別 and (**特性)
使用的例子:
@media screen and(max-width: 480px)
}
同時注意的是 ie8 既不支援html5也不支援 **查詢 移動端布局
預設以寬度為640px的設計稿為基準頁面,然後通過js獲取當前顯示裝置的尺寸,對應的調整 html 標籤的font size大小,從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的,用於瀏覽器渲染頁面,而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口,即可見視口與布局視口,二者的區別在於前者為基於移動裝置螢幕的實際寬度,而後者為...
移動端布局
移動端頁面基本上和web端區別不大 但要考慮到 移動端螢幕尺寸不大並且都是全屏布局 而且 螢幕尺寸都不一樣 所有不能使用網頁的固定尺寸來布局 需要使用百分比來布局 優點 移動端基本都相容h5 css3 所有可以放心的去使用css3的樣式來布局 移動端頁面一般都不大 所以標籤使用的並不多 相對乙個一面...