網(wǎng)上的教程好復(fù)雜，我寫一個(gè)簡(jiǎn)版的。
簡(jiǎn)單說(shuō)呢就針對(duì)不同的屏幕分辨率應(yīng)用不同的CSS樣式。比如在電腦、Pad設(shè)備上，屏幕比較寬，就可以一行放2個(gè)Div。
到了手機(jī)上，或者P" />

亚洲一区二区三区无码少年_日韩亚洲欧美综合一区二区三区_国产精品成人69xxx_被主人狠狠调教打屁股_国产女厕所偷窥系列在线视频_老头猛挺进王进霞的体内视频_日本女同伦理片_一级毛片特黄视频免费观看_国产成人无码免费看视频软件

武漢互贏網(wǎng)絡(luò)科技股份有限公司

為企業(yè)創(chuàng)品牌·從營(yíng)銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營(yíng)銷

24小時(shí)熱線

159 7210 9576027-89992189

響應(yīng)式設(shè)計(jì)簡(jiǎn)介

作者：龍 時(shí)間：2018-07-25 瀏覽：

網(wǎng)上的教程好復(fù)雜，我寫一個(gè)簡(jiǎn)版的。

簡(jiǎn)單說(shuō)呢就針對(duì)不同的屏幕分辨率應(yīng)用不同的CSS樣式。比如在電腦、Pad設(shè)備上，屏幕比較寬，就可以一行放2個(gè)Div。
到了手機(jī)上，或者Pad豎著拿的的時(shí)候，一行就只放1個(gè)Div。
 
這里有2個(gè)關(guān)鍵點(diǎn)：
一是如何在不修改Dom結(jié)構(gòu)的前提下調(diào)整布局。
二是如何判斷屏幕分辨率并應(yīng)用對(duì)應(yīng)的CSS。
 
以上兩點(diǎn)都應(yīng)該不依賴與JS。
 
實(shí)現(xiàn)第一點(diǎn)依靠的是流式布局。就是所有參與布局的DIV都用float:left，寬度都用百分比表示。比如下圖，黃色部分的寬度是60%，橘色寬度是40%。
寬
 
 
如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了，如下圖。從而實(shí)現(xiàn)不修改Dom實(shí)現(xiàn)布局變化。
窄
 
 
那么如何不使用JS而實(shí)現(xiàn)動(dòng)態(tài)調(diào)整CSS樣式就是第二個(gè)關(guān)鍵點(diǎn)。
HTML5中提供了一種新的CSS語(yǔ)法——@media，學(xué)名是Media Query，可以為不同的分辨率設(shè)定不同的樣式。
 
 
1
2
3
4
5
6
7
8
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}

上面這段代碼的含義就是當(dāng)屏幕寬度小于等于320像素時(shí)應(yīng)用大括號(hào)中的樣式。下圖是在CSS生效時(shí)在瀏覽器中的效果：

 

css
 
@media還有一些更復(fù)雜的用法，比如：
 
1
2
/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {

這段語(yǔ)句就是針對(duì)iPhone橫屏的。即，瀏覽器寬度在321-480像素之間，且方向是“橫向”時(shí)生效。

 

不過(guò)自從Retina這中妖艷的屏幕推出，分辨率已經(jīng)不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。
所以還有必要判斷一下設(shè)備的像素密度-device-pixel-ratio。
 
 
1
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
比如上面的語(yǔ)句就是判斷終端的像素比是2的話，所渲染的樣式?？梢赃m用于iPhone4，iPhone5等設(shè)備。
 
除了上述兩點(diǎn)，還需要在頁(yè)面上增加一個(gè)viewport的meta標(biāo)簽，否則在手機(jī)上可能會(huì)有頁(yè)面自動(dòng)縮放的情況。例如：
 
1
<meta name="viewport" content="width=device-width; initial-scale=1.0">
總結(jié)一下：響應(yīng)式布局有三個(gè)關(guān)鍵點(diǎn)：
1、流式布局 Liquid Layout
2、Media Query
3、viewport
 
具體細(xì)節(jié)就請(qǐng)大家自己研究相關(guān)的語(yǔ)法了。
 
Media Query的語(yǔ)法比較復(fù)雜，這里個(gè)大家推薦一個(gè)工具，可以方便的設(shè)計(jì)布局，并可以針對(duì)各種設(shè)備自動(dòng)生成Media Query的語(yǔ)句：
http://www.responsivewebcss.com/


轉(zhuǎn)載自AlloyTeam：http://www.alloyteam.com/2014/01/responsive-design/



.

 公司名稱：武漢互贏網(wǎng)絡(luò)科技有限公司

　　公司地址：武漢市武昌區(qū)靜安路6號(hào)創(chuàng)意產(chǎn)業(yè)園408室

　　客 服QQ：562257562 848467306

　　咨詢電話：027-89992189

　　業(yè)務(wù)熱線：15972109576

　　公司網(wǎng)站：www.whtlnet.com

武漢做網(wǎng)站   武漢網(wǎng)站建設(shè)    武漢網(wǎng)站制作    武漢網(wǎng)絡(luò)公司    武漢網(wǎng)站開發(fā)    武漢建網(wǎng)站


最新動(dòng)態(tài)

常見(jiàn)問(wèn)題百寶箱

全國(guó)服務(wù)熱線

027-89992189

掃一掃關(guān)注微信

Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號(hào)

獲取品牌營(yíng)銷方案

快速填寫

馬上獲取

互聯(lián)網(wǎng)低成本創(chuàng)名牌從此開始！