摘要:一允許網(wǎng)頁寬度自動(dòng)調(diào)整首先,在網(wǎng)頁代碼的頭部,加入一行標(biāo)簽。四選擇加載自適應(yīng)網(wǎng)頁設(shè)計(jì)的核心,就是引入的模塊。參考自自適應(yīng)網(wǎng)頁設(shè)計(jì)基于等視區(qū)相對(duì)單位的響應(yīng)式排版和布局
一、允許網(wǎng)頁寬度自動(dòng)調(diào)整
首先,在網(wǎng)頁代碼的頭部,加入一行viewport標(biāo)簽。
viewport是網(wǎng)頁默認(rèn)的寬度和高度,上面這行代碼的意思是,網(wǎng)頁寬度默認(rèn)等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網(wǎng)頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個(gè)設(shè)置,包括IE9。對(duì)于那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
由于網(wǎng)頁會(huì)根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對(duì)寬度的布局,也不能使用具有絕對(duì)寬度的元素。指定百分比寬度width: xx%或者width:XXem;
使用相對(duì)大小的字體em或者rem。一般瀏覽器的默認(rèn)字體大小為16px。“em”是一個(gè)相對(duì)的大小,其參考物指的是相對(duì)于元素父元素的font-size。因此,1em總是等于父元素的字體大小。而rem總是相對(duì)于根元素的字體大小進(jìn)行計(jì)算的。
1.設(shè)置百分比時(shí)的計(jì)算
相對(duì)于父元素寬度的:[max/min-]width、left、right、padding、margin 等;
相對(duì)于父元素高度的:[max/min-]height、top、bottom 等;
相對(duì)于繼承字號(hào)的:font-size 等;
相對(duì)于自身字號(hào)的:line-height 等;
相對(duì)于自身寬高的:border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等;
特殊算法的:background-position(方向長(zhǎng)度 / 該方向除背景圖之外部分總長(zhǎng)度 * 100)、filter 系列函數(shù)等;
如果自身設(shè)置 position: absolute,則相對(duì)于離它最近的那個(gè) position 不為 static 的外層元素,如果沒有這樣的元素,則相對(duì)于窗口。
如果 position: fixed,“父元素”指視口。
margin如果沒有加后綴是相對(duì)于寬,但是加了后綴,比如margin-left,則是相對(duì)于高;
2.設(shè)置em時(shí)的計(jì)算
元素自身沒有設(shè)置字號(hào)大小時(shí),則默認(rèn)使用父元素字號(hào)大小。元素自身要是設(shè)置了字體大小后,則字體計(jì)算公式為:
需要轉(zhuǎn)換的像素值/父元素的font-size=em值
元素的width、height、line-height、margin、padding、border等值轉(zhuǎn)換總是以當(dāng)前元素的字號(hào)大小計(jì)算:
需要轉(zhuǎn)換的像素值/元素的font-size=em值
比如:
.outerdiv { font-size: 32px; } .innterdiv { width: 2em; /*64/32=2*/ height: 2em; line-height: 2em; padding: 0.5em; }
當(dāng)innterdiv設(shè)置font-size的大小時(shí)
.innterdiv { font-size: 0.5em;/*16/32=0.5*/ width: 2em;/*32/16=2*/ height: 2em; line-height: 2em; padding: 0.5em; }三、使用流動(dòng)布局
即各個(gè)區(qū)塊的位置都是浮動(dòng)的,不是固定不變的。當(dāng)寬度太小,放不下兩個(gè)元素,后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方,不會(huì)在水平方向overflow(溢出),避免了水平滾動(dòng)條的出現(xiàn)。
四、選擇加載CSS"自適應(yīng)網(wǎng)頁設(shè)計(jì)"的核心,就是CSS3引入的Media Query模塊。設(shè)置斷點(diǎn)時(shí),最好以內(nèi)容為基礎(chǔ)設(shè)置,而不是以各種屏幕尺寸來設(shè)置。
@media screen and (max-width: 1200px) { } @media screen and (max-width: 780px) { }四、圖片的自適應(yīng)
使圖片的寬度為100%,但是不超過最大寬度400px;
img { width: 100%; max-width:400px; }
大多數(shù)嵌入網(wǎng)頁的視頻也可這樣寫:img, object { max-width: 100%;}
五、font-size實(shí)現(xiàn)自適應(yīng)使用calc實(shí)現(xiàn)字體的自適應(yīng)。比如要讓屏幕寬度在 1553px-1032px 的范圍內(nèi)變化時(shí),font-size大小是在12px-16px之間對(duì)應(yīng)變化,則
font-size: calc(0.75em + 4*(100vw - 1032px) / 521);
vw 相對(duì)于視窗的寬度:視窗寬度是100vw。視窗寬度指瀏覽器內(nèi)部的可視區(qū)域大小,即window.innerWidth/window.innerHeight大小,不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。
0.75em可以換成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);
也可換成px單位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari瀏覽器不支持該寫法。
參考自:
自適應(yīng)網(wǎng)頁設(shè)計(jì)(Responsive Web Design)
基于vw等viewport視區(qū)相對(duì)單位的響應(yīng)式排版和布局
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/111646.html
摘要:于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點(diǎn)的來看,響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng),而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本,自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。 自適應(yīng)的體驗(yàn)http://m.ctrip.com/html5/ 響應(yīng)式的體驗(yàn) http://segmentfault.com/ 整理了幾篇自適...
摘要:于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點(diǎn)的來看,響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng),而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本,自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。 自適應(yīng)的體驗(yàn)http://m.ctrip.com/html5/ 響應(yīng)式的體驗(yàn) http://segmentfault.com/ 整理了幾篇自適...
摘要:于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再從直觀一點(diǎn)的來看,響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng),而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本,自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。 自適應(yīng)的體驗(yàn)http://m.ctrip.com/html5/ 響應(yīng)式的體驗(yàn) http://segmentfault.com/ 整理了幾篇自適...
摘要:做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒有加會(huì)不會(huì)出問題針對(duì)這些疑問我說一下我的見解。 做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問,也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒有加dpr會(huì)不會(huì)出問題,針對(duì)這些疑問我說一下我的見解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同,特別與響應(yīng)式的關(guān)...
摘要:做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和之間的關(guān)系產(chǎn)生疑問也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒有加會(huì)不會(huì)出問題針對(duì)這些疑問我說一下我的見解。 做移動(dòng)端自適應(yīng)時(shí)可能很多人都對(duì)自適應(yīng)和dpr之間的關(guān)系產(chǎn)生疑問,也有一些人會(huì)疑慮比如我的自適應(yīng)方案沒有加dpr會(huì)不會(huì)出問題,針對(duì)這些疑問我說一下我的見解。 1. 什么是尺寸自適應(yīng) 首先標(biāo)題說的自適應(yīng),可能自適應(yīng)在不同人眼里理解不同,特別與響應(yīng)式的關(guān)...
閱讀 1631·2021-10-27 14:13
閱讀 1868·2021-10-11 10:59
閱讀 3367·2021-09-24 10:26
閱讀 1925·2019-08-30 12:48
閱讀 3041·2019-08-30 12:46
閱讀 2033·2019-08-30 11:16
閱讀 1414·2019-08-30 10:48
閱讀 2740·2019-08-29 16:54