如何設計響應式布局
阿新 • • 發佈:2017-07-06
nbsp meta標簽 尺寸 type 計算 置1 ice 如何 clas
1、在meta標簽中添加viewport
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
2、 不使用絕對寬度(px),使用相對寬度(%)
3、 不使用絕對文字大小(px),使用相對文字大小(em,rem)
em相對於父元素字體尺寸比例,rem相對於根元素(html元素)字體尺寸的比例,比如各瀏覽器默認根元素字體大小為16px,0.75rem就相當於16*0.75=12px。也可以先設置html{font-size:62.5%},設置根元素字體大小為10px,然後再計算各元素的字體大小,如要設置12px就是1.2rem,14px就是1.4rem,25px就是2.5rem,更容易計算。
4、 媒體查詢標簽
自適應網頁設計的核心,就是CSS3引入的media query模塊。它的意思就是,自動探測屏幕寬度,然後加載相應的css文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:400px)” href=”tinyScreen.css”/>
上面代碼的意思是,如果屏幕寬度小於400像素(max-width:400px),就加載tinyScreen.css文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:400px) and (max-width:600px)” href=”smallScreen.css”/>
如果屏幕寬度在400像素到600像素之間,則加載smallscreen.css文件。
5、 圖片的自動適應
除了布局和文本,自適應網頁設計還必須實現圖片的自動縮放
img{max-width:100%} img{min-width:100%}
老版本的IE不支持max-width,所以只好寫成img{width:100%}
如何設計響應式布局