摘要:手機網(wǎng)站電腦網(wǎng)站平版網(wǎng)站響應(yīng)式網(wǎng)站在沒有足夠經(jīng)費跟精力的做一個手機網(wǎng)站的情況下,響應(yīng)式網(wǎng)站是個不錯的選擇。
手機網(wǎng)站+電腦網(wǎng)站+平版網(wǎng)站 = 響應(yīng)式網(wǎng)站
在沒有足夠經(jīng)費跟精力的做一個手機網(wǎng)站的情況下,響應(yīng)式網(wǎng)站是個不錯的選擇。
它有以下的優(yōu)點:
減少工作量(網(wǎng)站代碼只要一份,只需要做js方面的改動及可以了)
節(jié)省時間(每個設(shè)備都得到考慮,搜索也友好)
首先是[][1]的設(shè)置:
大多數(shù)手機的瀏覽器內(nèi)核是居于webkit核心,且大多數(shù)瀏覽器都支持使用viewport meta元素覆蓋默認(rèn)的畫布縮放。所以我們可以在head中插入一個meta設(shè)置具體的寬度或者縮放比例。
width = device-width 瀏覽器頁面的寬度等于設(shè)備的寬度,user-scalable = no,靜止縮放,若為1.0則是:瀏覽器頁面安裝視口大小渲染頁面,maximum-scale minimum-scale 最大最小縮放頁面到設(shè)備寬度的幾倍。
針對IE瀏覽器的一些設(shè)置,因為css3是響應(yīng)式關(guān)鍵技術(shù),但是IE瀏覽器的支持有限,所以上訴代碼的意思是:
告訴IE瀏覽器,IE8/9及以后的版本都會以最高版本IE來渲染頁面。具體有關(guān)這個的可參考這個博客
設(shè)置了viewport meta標(biāo)簽后頁面不縮放了,我們可以根據(jù)css3的媒體查詢針對不同視口的寬度進行修正
csss3媒體查詢
@media only screen and (max-width:30em){}; @media only screen and (max-width:50em){}; @media only screen and (min-width:30em) and (max-width:50em){}; @media print{}//打印樣式
最大寬度是50em中寫的樣式,在 30em < width < 50em 中一樣的效果,所以不用重復(fù)寫
百分比布局和rem em
使用百分比布局創(chuàng)建流動的彈性界面:
即是將元素固定尺寸轉(zhuǎn)換為相對尺寸,公式:目標(biāo)元素的寬度/上下文元素的寬度=百分比寬度,引用自書本《無懈可擊的Web設(shè)計》。
當(dāng)被包裹的元素有border時,若不想border隨上下文變寬或便窄,可以將被包裹元素減去兩邊的border,然后再用那個公式。
同理,padding-left,padding-right,以及margin-right,margin-left的大小也是一樣的道理。
然后就是頁面字體的大小了。
em 相對的也是上下文,rem(root em )相對的是html根元素,
{ font-size:16px; font-size:1em;//這三個值效果是相等的效果。 font-size:100%; } html{ font-size: 16px; } .parent{ font-size: 2px; } .son{ font-size: 2em;//son下的字體大小是4px; } html{ font-size: 16px; } .parent{ font-size: 1rem;//16px; } .son{ font-size: 2rem;//32px; } //我見一些前輩大都這樣設(shè)置,我知道后也比較喜歡這個, //因為不會像em那樣產(chǎn)生嵌套混亂的問題,也可以很方便的設(shè)置24,28這樣數(shù)值。 html{ font-size: 62.5%;//也就是(10/16)*100%; } .parent{ font-size: 2.4rem;//24px; } .son{ font-size:1rem;//10px; }
彈性圖片
img{ max-width:100%;//自動縮放到與容器100%匹配 } .side img{ max-width:50%;//特定的某個樣式 } 但是這種會導(dǎo)致圖片在視口很大的時候被拉長,所以可以這樣 .side img{ width: 30%; max-width:100px; }
響應(yīng)式圖片(加載與設(shè)備相匹配的圖片)
//srcset用來指向提供的圖片資源,sizes用來表示尺寸臨界點,響應(yīng)響應(yīng)式布局 //IE均不支持,不過Edg兼容模式支持 ?
還有就是之前的js來監(jiān)聽window.resize事件,以及svg,我對svg 不熟,就不說了。
在響應(yīng)式圖片里面其實還涉及到了物理像素,邏輯像素,dpi等,但我覺得新的方案里面不需要我們寫 1x 2x 那些了,我就寫了先,因為我對這個也只知道大概~
希望下次可以填滿點,如果有錯誤,歡迎指正~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112799.html
摘要:手機網(wǎng)站電腦網(wǎng)站平版網(wǎng)站響應(yīng)式網(wǎng)站在沒有足夠經(jīng)費跟精力的做一個手機網(wǎng)站的情況下,響應(yīng)式網(wǎng)站是個不錯的選擇。 手機網(wǎng)站+電腦網(wǎng)站+平版網(wǎng)站 = 響應(yīng)式網(wǎng)站 在沒有足夠經(jīng)費跟精力的做一個手機網(wǎng)站的情況下,響應(yīng)式網(wǎng)站是個不錯的選擇。它有以下的優(yōu)點: 減少工作量(網(wǎng)站代碼只要一份,只需要做js方面的改動及可以了) 節(jié)省時間(每個設(shè)備都得到考慮,搜索也友好) 首先是[][1]的設(shè)置:大多數(shù)手...
摘要:概念響應(yīng)式網(wǎng)頁設(shè)計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。預(yù)計到年,移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。 概念 響應(yīng)式網(wǎng)頁設(shè)計最初是由 Ethan Marcotte 提出的一個概念:為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案?Web設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。當(dāng)然響應(yīng)式Web設(shè)計不僅僅是...
摘要:概念響應(yīng)式網(wǎng)頁設(shè)計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。預(yù)計到年,移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越端的流量。 概念 響應(yīng)式網(wǎng)頁設(shè)計最初是由 Ethan Marcotte 提出的一個概念:為什么一定要為每個用戶群各自打造一套設(shè)計和開發(fā)方案?Web設(shè)計應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整。當(dāng)然響應(yīng)式Web設(shè)計不僅僅是...
摘要:所以一個網(wǎng),甚至是響應(yīng)式設(shè)計,在兩個平臺上都會損害您整體的。三響應(yīng)式與如果把網(wǎng)站作為一個單獨的網(wǎng)站,如果網(wǎng)站的內(nèi)容與桌面版的內(nèi)容相對缺少,導(dǎo)致用戶回到桌面端的網(wǎng)站,會記錄這種選擇,使搜索排名降低,國內(nèi)百度就不知道會怎樣。 一、為什么需要響應(yīng)式設(shè)計(responsible web design) 1. 響應(yīng)式發(fā)展背景 1、屏幕尺寸的快速變化,iphone為320x480,分辨率在未來可以...
閱讀 2591·2021-11-18 10:02
閱讀 2627·2021-11-15 11:38
閱讀 3697·2021-11-12 10:36
閱讀 695·2021-11-12 10:34
閱讀 2888·2021-10-21 09:38
閱讀 1478·2021-09-29 09:48
閱讀 1492·2021-09-29 09:34
閱讀 1088·2021-09-22 10:02