自適應網(wǎng)頁設計

wenshi11019 發(fā)布于2019-08-01 15:51 / 3418人閱讀

摘要：一允許網(wǎng)頁寬度自動調(diào)整首先，在網(wǎng)頁代碼的頭部，加入一行標簽。四選擇加載自適應網(wǎng)頁設計的核心，就是引入的模塊。參考自自適應網(wǎng)頁設計基于等視區(qū)相對單位的響應式排版和布局

一、允許網(wǎng)頁寬度自動調(diào)整

首先，在網(wǎng)頁代碼的頭部，加入一行viewport標簽。
　　

viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

二、不使用絕對寬度，不使用絕對大小的字體

由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。指定百分比寬度width: xx%或者width:XXem;
使用相對大小的字體em或者rem。一般瀏覽器的默認字體大小為16px。“em”是一個相對的大小，其參考物指的是相對于元素父元素的font-size。因此，1em總是等于父元素的字體大小。而rem總是相對于根元素的字體大小進行計算的。

1.設置百分比時的計算
相對于父元素寬度的：[max/min-]width、left、right、padding、margin 等；
相對于父元素高度的：[max/min-]height、top、bottom 等；
相對于繼承字號的：font-size 等；
相對于自身字號的：line-height 等；
相對于自身寬高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、filter 系列函數(shù)等；
如果自身設置 position: absolute，則相對于離它最近的那個 position 不為 static 的外層元素，如果沒有這樣的元素，則相對于窗口。
如果 position: fixed，“父元素”指視口。
margin如果沒有加后綴是相對于寬，但是加了后綴，比如margin-left，則是相對于高；

2.設置em時的計算
元素自身沒有設置字號大小時，則默認使用父元素字號大小。元素自身要是設置了字體大小后，則字體計算公式為：
需要轉換的像素值/父元素的font-size=em值
元素的width、height、line-height、margin、padding、border等值轉換總是以當前元素的字號大小計算：
需要轉換的像素值/元素的font-size=em值
比如：


     
     

   
   
.outerdiv {
    font-size: 32px;
}

.innterdiv {
    width: 2em; /*64/32=2*/
    height: 2em;
    line-height: 2em;
    padding: 0.5em;
}

當innterdiv設置font-size的大小時

.innterdiv {
    font-size: 0.5em;/*16/32=0.5*/
    width: 2em;/*32/16=2*/
    height: 2em;
    line-height: 2em;
    padding: 0.5em;
}

三、使用流動布局

即各個區(qū)塊的位置都是浮動的，不是固定不變的。當寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。

四、選擇加載CSS

"自適應網(wǎng)頁設計"的核心，就是CSS3引入的Media Query模塊。設置斷點時，最好以內(nèi)容為基礎設置，而不是以各種屏幕尺寸來設置。
　

@media screen and (max-width: 1200px) {
　　　　
　}
@media screen and (max-width: 780px) {
　　　　
　}

四、圖片的自適應

使圖片的寬度為100%,但是不超過最大寬度400px;

img { 
   width: 100%;
   max-width:400px;
}

大多數(shù)嵌入網(wǎng)頁的視頻也可這樣寫：img, object { max-width: 100%;}

五、font-size實現(xiàn)自適應

使用calc實現(xiàn)字體的自適應。比如要讓屏幕寬度在 1553px-1032px 的范圍內(nèi)變化時，font-size大小是在12px-16px之間對應變化，則

font-size: calc(0.75em + 4*(100vw - 1032px) / 521);

vw 相對于視窗的寬度：視窗寬度是100vw。視窗寬度指瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區(qū)域大小。
0.75em可以換成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);
也可換成px單位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari瀏覽器不支持該寫法。

參考自：
自適應網(wǎng)頁設計（Responsive Web Design）
基于vw等viewport視區(qū)相對單位的響應式排版和布局

GPU云服務器云服務器自適應網(wǎng)頁設計 asp網(wǎng)頁自適應 php 網(wǎng)頁自適應自適應

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50159.html

（轉）響應式和自適應區(qū)別

摘要：于是出現(xiàn)了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區(qū)別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內(nèi)容更多。圖片的自適應除了布局和文本，自適應網(wǎng)頁設計還必須實現(xiàn)圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

rockswang 2019-08-20 14:45 評論0 收藏0
（轉）響應式和自適應區(qū)別

摘要：于是出現(xiàn)了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區(qū)別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內(nèi)容更多。圖片的自適應除了布局和文本，自適應網(wǎng)頁設計還必須實現(xiàn)圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

dockerclub 2019-08-30 15:53 評論0 收藏0
（轉）響應式和自適應區(qū)別

摘要：于是出現(xiàn)了一種新的布局方式寬度自適應布局。下面再從直觀一點的來看，響應式和自適應的區(qū)別首先兩種方式解決問題的是不一樣的。響應式的概念應該覆蓋了自適應，而且涵蓋的內(nèi)容更多。圖片的自適應除了布局和文本，自適應網(wǎng)頁設計還必須實現(xiàn)圖片的自動縮放。自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗 http://segmentfault.com/ 整理了幾篇自適...

Ilikewhite 2019-08-01 16:24 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產(chǎn)生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

omgdog 2019-08-22 18:19 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產(chǎn)生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產(chǎn)生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

617035918 2019-08-02 10:46 評論0 收藏0