您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)web開發(fā)中響應(yīng)式布局和自適應(yīng)布局的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
1. 設(shè)置 Meta 標(biāo)簽
大多數(shù)移動瀏覽器將HTML頁面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進行重置。下面的視圖標(biāo)簽告訴瀏覽器,使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在標(biāo)簽里加入這個meta標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
[1](user-scalable=no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問題。 )
3. 通過媒介查詢來設(shè)置樣式 Media Queries
Media Queries 是響應(yīng)式設(shè)計的核心。
它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的分辨率小于 980px,那么可以這樣寫:
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
這里的樣式就會覆蓋上面已經(jīng)定義好的樣式。
4. 設(shè)置多種試圖寬度
假如我們要設(shè)定兼容 iPad 和 iPhone 的視圖,那么可以這樣設(shè)置:
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
@media only screen and (min-width: 320px) and (max-width: 767px) {}
恩,差不多就這樣的一個原理。
1. 寬度需要使用百分比
例如這樣:
#head { width: 100% }
#content { width: 50%; }
2. 處理圖片縮放的方法
簡單的解決方法可以使用百分比,但這樣不友好,會放大或者縮小圖片。那么可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了,就縮小。假如圖片小了,就原尺寸輸出。
img { width: auto; max-width: 100%; }
用和偽元素 +content 屬性來動態(tài)顯示一些內(nèi)容或者做其它很酷的事情,在 CSS3 中,任何元素都可以使用 content 屬性了,這個方法就是結(jié)合 css3 的 attr 屬性和 HTML 自定義屬性的功能: HTML 結(jié)構(gòu):
<img src=""
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
CSS 控制:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
3. 其他屬性
例如 , 等,都需要和一樣控制好寬度。對于,建議不要增加 padding 屬性,低分辨率下使用內(nèi)容居中:
table?th, table?td { padding: 0 0; text-align: center; }
感謝各位的閱讀!關(guān)于“web開發(fā)中響應(yīng)式布局和自適應(yīng)布局的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。