PC端頁面適應不一樣的分辨率的方法（轉載）

時間 2020-05-23

標籤頁面適應不一樣分辨率方法轉載简体版

原文原文鏈接

原文地址：http://www.javashuo.com/article/p-hmplckwq-dx.htmlcss

上週完成一個PC端的項目，對於我這樣的小白來講，這個項目裏面最大的問題就是，如何作到讓HTML頁面適應電腦的不一樣分辨率。
經過師傅的指導和本身查閱資料，最終成功適配不一樣的分辨率，完成了這個項目。
如今回頭再來看這個項目，忽然發現適配不一樣的分辨率真的很是簡單。這裏總結兩種方法，跟你們分享一下。但願能夠幫助你們快速完成本身的項目。瀏覽器

一.根據不一樣的分辨率，加載不一樣的CSS樣式文件框架

這個方法的思路是，分別針對800、1280、1440、1600、1920等分辨率，建立不一樣的css文件。而後在各類分辨率下，寫css樣式表。學習

可能你會感受針對一個頁面，要寫這麼多不一樣的css樣式表，這個工做量確定很大。其實也不盡然，根據我在這個項目中的實踐，發現這個工做量實際上是比較小的。spa

首先，咱們在作項目的時候，通常狀況下會有一些範圍限制，好比這個項目只須要適配1280~1920分辨率便可。並且各個分辨率之間，咱們有的時候只是對頁面上的元素進行寬高、尺寸、位置等進行調整，總體的一個框架是類似或者說是相同的。.net

不只如此，有的時候項目的要求不高，沒有比較1:1高度還原設計稿，那麼這個時候，咱們在1440分辨率下的樣式表，在1280分辨率下也是適用的，這個時候，咱們的工做量又進一步減小。設計

這個時候，咱們能夠先完成一個分辨率下的css樣式表。而後在這個基礎之上，對其餘分辨率進行調整便可。這個過程咱們只須要調整一些參數便可。blog

好比在個人項目裏面，這對不一樣的分辨率，我只作了三個樣式表教程

這個時候，咱們只須要在咱們的HTML頁面的<head></head>標籤中，使用js，根據不一樣的電腦分辨率，加載不一樣的css樣式表。注意這裏的js必定要寫在<head></head>標籤裏面，這樣在加載頁面內容以前，能夠提早把css樣式表加載出來ip

二.採用媒體查詢

媒體查詢是CSS3的新特性，絕大多數瀏覽器均可兼容這一特性。這個方法的思路也是根據不一樣的分辨率，應用不一樣的css樣式。

若是你對媒體查詢不熟悉，能夠點擊連接進行學習這一新特性。菜鳥教程-CSS3 @media 查詢

這個思路和和方法一差很少，或者說方法一的思路和這個思路差很少，畢竟這也是官方的作法。咱們有兩種使用媒體查詢的方式。

1.根據不一樣的分辨率，引入不一樣的css樣式表
這個方法和方法一相同，也是經過判斷電腦的分辨率，來引入相對應的css樣式表。

<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">

<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

2.在同一個css樣式表中，根據不一樣的分辨率，寫不一樣的css樣式
這個方法只有一個css演示表，在這個樣式表裏面，根據不一樣的分辨率，寫不一樣的css樣式。

/*分辨率高於1440，採用下面的樣式*/
@media screen and (min-device-width: 1440px){
div{
width: 300px;
height: 300px;

}
}
</style>

三. 總結
以上的方法的思路大同小異，根據我本身的經歷，給你們提出一些小的建議。

由於我在公司的電腦的分辨率是1440，因此一開始我實在1440分辨率下寫得css樣式表，而後在這個基礎之上，去調整其餘的分辨率。發現根據小分辨率樣式去調整大分辨率樣式比較簡單。固然，也許你喜歡由大到小，這都無所謂，看我的興趣。

--------------------- 做者：fengzhenzhen8023 來源：CSDN 原文：https://blog.csdn.net/fengzhen8023/article/details/81281117