資訊專欄INFORMATION COLUMN
摘要：最近在寫一個端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。
最近在寫一個PC端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。
之前一直寫的是固定版心，然后在將容器居中，這樣寫的話，就導致頁面在低分辨屏幕下會出現橫向的滾動條，內容不能全部展示。
提出這個需求的時候腦海里閃過幾個方案。
1、link media屬性加載不同樣式
這樣寫的話那么就需要每個分辨率都需要寫一個樣式，而且代碼內容幾乎一致，樣式文件增多，后期需要修改的話也是一個不少的工作量。
2、transform:scale()當時腦子里也閃過這句話，
可以用js獲取頁面寬度，然后對元素進行縮放，這樣內容也會隨著縮放，但是元素所占的位置沒有改變，transform會影響畫布上的視覺布局，不會影響css布局本身，只是引起頁面重繪。
3、rem布局
在做手機wep開發的時候，會經常用到rem。rem根據頁面的根節點的字體大小進行轉變。作法與手機一致，利用js動態計算頁面寬度在設定根元素的字體大小。
4、css media
好在現在都是使用css預處理器來書寫css，不然的話，這也是相當大的工作量。寫這個的時候，是根據設計圖中元素寬度在總寬度中的占比，根據比例，在不同分辨率下獲得元素寬度，這樣的話元素的高度無法控制，寫的是max-height，內外邊距和設計圖上保持一致。以下是用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){
....
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53849.html
摘要：最近在寫一個端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。 最近在寫一個PC端的活動頁面，即將完工的時候，增加了個需求，想讓頁面適配不同的分辨率，既然提出了這樣的需求，那么我們就要去盡量滿足。之前一直寫的是固定版心，然后在將容器居中，這樣寫的話，就導致頁面在低分辨屏幕下會出現橫向的滾動條，內容不能全部展示。提出這個需...
摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...
摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...
閱讀 3548·2021-08-31 09:39
閱讀 1854·2019-08-30 13:14
閱讀 2918·2019-08-30 13:02
閱讀 2769·2019-08-29 13:22
閱讀 2341·2019-08-26 13:54
閱讀 767·2019-08-26 13:45
閱讀 1586·2019-08-26 11:00
閱讀 982·2019-08-26 10:58
