主要用到的兩段**
window.onresize=function(){}; //檢測視窗尺寸變化
document.body.clientwidth; //當前螢幕寬度
//檢測變化
window.onresize=function();
var mainele=document.getelementbyid("main");
function checkwidth(nowwidth)
else if(nowwidth<990&&nowwidth>=840)
else if(nowwidth<840)
}
兩種用法:
@media mediatype(**裝置型別) and|not|only (media feature匹配引數)
在css中寫以上**即可
在html中寫這段**即可,它的作用是在不同的解析度下切換不同的css樣式檔案
all 用於所有裝置
print 印表機和列印預覽
screen 電腦螢幕,平板,智慧型手機等
speech 螢幕閱讀器等發生裝置
示例一:
@media screen and (max-width: 450px)
}@media screen and (min-width: 451px)
}@media screen and (device-width: 450px)
}示例二:
頁面縮放
meta:vp +tab鍵 => 自動生成
width=device-width:寬度等於當前裝置的寬度
initial-scale:初始的縮放比例(預設設定為1.0)
maximum-scale:允許使用者縮放到的最小比例(預設設定為1.0)
maximum-scale:允許使用者縮放到的最大比例(預設設定為1.0)
user-scalable:使用者是否可以手動縮放(預設設定為no) //但瀏覽器允許,這個設定沒卵用
下面**意思為ie使用最新渲染,chrome=1意為有chrome優先使用
//引入js
html5shiv.js respond.js
常見的瀏覽器解析度
測試web網頁的適配,必須要了解下最主要的解析度,以及最低適配 16 9寬高比常見的解析度有四種 1280 720 17吋 1366 768 1360 768 18.5吋 1600 900 20吋 1920 1080 21.5 23 23.6 24 24.6 25 27 1280 800是筆記本常用...
Android解析度常識 多解析度適配
螢幕大小 以螢幕對角線的物理長度來衡量螢幕的大小 解析度 螢幕中所有物理畫素點數。如1920x1080,就表示寬方向有1920個畫素,高方向有1080個畫素,整個螢幕有2073600個畫素。螢幕密度 dpi dots per inch 即畫素密度,每英吋面積上存在多少個畫素。160dpi表示單位面積...
螢幕解析度適配
螢幕解析度 1024x600 density 1 160 資料夾 values mdpi 1024x600 螢幕解析度 1024x600 density 1.5 240 資料夾 values hdpi 683x400 由1024 1.5 600 1.5得到,需要四捨五入。螢幕解析度 800x480 ...