響應式布局的注意點

2021-07-04 07:16:19 字數 1248 閱讀 4378

1、頭部新增meta：

content="default"ie8或者更早的瀏覽器並不支援media query, 可以使用media-queries.js或者respond.js來為ie新增media query支援 :

2、頭部新增link，不同螢幕解析度使用不同的css樣式：

"only screen and (min-width: 980px)" rel="stylesheet"


type="text/css" href="css/style1.css" /> //pc端樣式


"only screen and (min-width: 640px) and (max-width:979px)" rel="stylesheet"


type="text/css" href="css/style2.css" /> //ipad等中型螢幕的樣式


"only screen and (min-width: 320px) and (max-width:639px)" rel="stylesheet"


type="text/css" href="css/style3.css" /> //移動端樣式
或者在同乙個css檔案裡寫不同解析度所適配的樣式，如下：

/* 當瀏覽器的可視區域小於980px */

@media screen and (max-width: 980px) 


#content


#sidebar


#footer


}
/* 當瀏覽器的可視區域小於640px */

@media screen and (max-width: 640px) 


#searchform


#content


#sidebar


}
3、各個模組尺寸盡量使用百分比。

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局知識點

1.css3視口單位 vw,vh,vmin,vmax 視口 視口，就是根據你瀏覽器視窗的大小的單位，不受顯示器解析度的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那麼多不同電腦有關解析度的自適應問題 vw 這是 視口寬度 單位。1vw等於視口寬度的1 它與百分比類似，不同之處在於，所有元素的...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...