PC端各分辨率適配

since1986 發(fā)布于2019-08-02 14:30 / 2945人閱讀

摘要：最近在寫一個端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。

最近在寫一個PC端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。
之前一直寫的是固定版心，然后在將容器居中，這樣寫的話，就導(dǎo)致頁面在低分辨屏幕下會出現(xiàn)橫向的滾動條，內(nèi)容不能全部展示。
提出這個需求的時候腦海里閃過幾個方案。
1、link media屬性加載不同樣式
這樣寫的話那么就需要每個分辨率都需要寫一個樣式，而且代碼內(nèi)容幾乎一致，樣式文件增多，后期需要修改的話也是一個不少的工作量。
2、transform:scale()當時腦子里也閃過這句話，
可以用js獲取頁面寬度，然后對元素進行縮放，這樣內(nèi)容也會隨著縮放，但是元素所占的位置沒有改變，transform會影響畫布上的視覺布局，不會影響css布局本身，只是引起頁面重繪。
3、rem布局
在做手機wep開發(fā)的時候，會經(jīng)常用到rem。rem根據(jù)頁面的根節(jié)點的字體大小進行轉(zhuǎn)變。作法與手機一致，利用js動態(tài)計算頁面寬度在設(shè)定根元素的字體大小。
4、css media
好在現(xiàn)在都是使用css預(yù)處理器來書寫css，不然的話，這也是相當大的工作量。寫這個的時候，是根據(jù)設(shè)計圖中元素寬度在總寬度中的占比，根據(jù)比例，在不同分辨率下獲得元素寬度，這樣的話元素的高度無法控制，寫的是max-height，內(nèi)外邊距和設(shè)計圖上保持一致。以下是用scss寫的部分樣式。
$screenWidthList: (960,1024,1280,1360,1366,1400,1600,1920,2048);
$designWidth: 1920;
@function percentToPx($width,$screenWidth){
$percent: $width/$designWidth;
@return $percent * $screenWidth * 1px;
}
@each $sw in $screenWidthList{
@media screen and (min-width: $sw*1px){

    ....

}
}

GPU云服務(wù)器云服務(wù)器分辨率適配 webrtc碼率和分辨率怎么適配適配問題機型適配

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53849.html

相關(guān)文章

PC端各分辨率適配

摘要：最近在寫一個端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。最近在寫一個PC端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。之前一直寫的是固定版心，然后在將容器居中，這樣寫的話，就導(dǎo)致頁面在低分辨屏幕下會出現(xiàn)橫向的滾動條，內(nèi)容不能全部展示。提出這個需...

hizengzeng 2019-08-23 15:57 評論0 收藏0
PC端各分辨率適配

摘要：最近在寫一個端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。最近在寫一個PC端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。之前一直寫的是固定版心，然后在將容器居中，這樣寫的話，就導(dǎo)致頁面在低分辨屏幕下會出現(xiàn)橫向的滾動條，內(nèi)容不能全部展示。提出這個需...

raoyi 2019-08-30 15:56 評論0 收藏0
重溫"什么是響應(yīng)式網(wǎng)頁設(shè)計？響應(yīng)式布局的實現(xiàn)原理"

摘要：概念響應(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)整。當然響應(yīng)式Web設(shè)計不僅僅是...

Nekron 2019-08-29 12:28 評論0 收藏0
重溫"什么是響應(yīng)式網(wǎng)頁設(shè)計？響應(yīng)式布局的實現(xiàn)原理"

摘要：概念響應(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)整。當然響應(yīng)式Web設(shè)計不僅僅是...

Joyven 2019-08-01 16:43 評論0 收藏0
pc端適配移動端

摘要：端和移動端共用一套代碼允許網(wǎng)頁寬度自動調(diào)整在網(wǎng)頁代碼的頭部，加入一行元標簽所有主流瀏覽器都支持這個設(shè)置，包括。 pc端和移動端共用一套代碼 1. 允許網(wǎng)頁寬度自動調(diào)整在網(wǎng)頁代碼的頭部，加入一行viewport元標簽所有主流瀏覽器都支持這個設(shè)置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js 2. 不使用絕對寬度由于網(wǎng)頁...

dmlllll 2019-08-02 12:00 評論0 收藏0