現(xiàn)在的上線網(wǎng)站，自適應網(wǎng)站占有了一定比例。作為一個菜鳥前端，這段時間編寫了一個靜態(tài)的自適應網(wǎng)頁。對此，寫下這篇文章。文章主要講一些自適應網(wǎng)頁基本原理和總結(jié)一些項目中遇見的問題。

一，自適應網(wǎng)頁基本原理

我是由2個問題出發(fā)的：
問題1：自適應網(wǎng)頁由什么構(gòu)成？
簡單來說，自適應網(wǎng)頁和pc網(wǎng)頁，移動端網(wǎng)頁是一樣，都是由js、css、html構(gòu)成。
問題2：如何讓網(wǎng)頁自適應？
我所理解的自適應網(wǎng)頁就是這個網(wǎng)頁可以兼容所有的屏幕，在用戶的屏幕上排版流利、順暢。正常顯示。不會給用戶一種別扭的感覺。
那么為了能夠讓網(wǎng)頁兼容各大頁面。你可以使用css的media。
下面我列舉一下最基本的主流屏幕，在css里面應該怎么寫。


這是兼容4k屏幕到手機端的寫法。

你必須要知道的點：

1. 這是從2560px 到 手機端 的寫法；
2. media的像素大小必須由大到小排列：
3. 首先，編寫常規(guī)的格式，即清除一些css的默認樣式；再來，編寫2560px時，樣式的變化；接著，往小屏幕編寫代碼。最后，測試即可。

二，總結(jié)此次項目遇見的問題

此次項目主要遇見2個問題：
問題1：測試時，用戶發(fā)現(xiàn)在自己的華為pus10上沒辦法正常顯示。
解決方法：經(jīng)過一系列的百度和搜狗。最后發(fā)現(xiàn)華為pu10它的分辨率比正常手機大很多，像素為1920*1080，因此要在編寫1920px的media之前，寫下一些代碼：
/*針對華為手機圖標無法正常比例縮放問題*/
@media screen and (max-device-width: 2100px) {
這是你要編寫的代碼
}
Ps：因為作者了解到，現(xiàn)在市場上流通常見的手機屏幕最大高達2100px，所以，上面的寫法可以很好的兼容（2100到最小手機端）。
 
問題2：關(guān)于項目中輪播圖的問題。
這個解決方法有點長，先省略。
 

三，分享一個干貨（自適應樣式的基本寫法）

@charset "UTF-8";
/*整站樣式*/
*,:after,:before {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;outline: 0!important;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;font-smoothing: antialiased}
body {color: #333;font-size: 14px;line-height: 1.5;font-family: 'Microsoft Yahei', "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;margin: 0px;}
img {max-width: 100%;border: none}
input,select,textarea {font-size: 14px;color: #333;font-family: 'Microsoft Yahei', "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;border: none}
input[type=submit],input[type=button],input[type=checkbox],input[type=radio],input[type=reset],select {-webkit-appearance: none;-moz-appearance: none;appearance: none}
::-webkit-input-placeholder {color: #999}
::-moz-placeholder {color: #999}
::-ms-input-placeholder {color: #999}
select::-ms-expand {display: none}
/*定義滾動條*/
.scrollbar::-webkit-scrollbar {width: 5px;height: 10px;background-color: transparent;}
.scrollbar::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);border-radius: 5px;background-color: transparent;}
.scrollbar::-webkit-scrollbar-thumb {background-color: #CCCCCC;width: 5px;}
a {cursor: pointer;color: #333;text-decoration: none}
ul {list-style: none}
.fix {*zoom: 1}
.fix:after,.fix:before {display: block;content: "";height: 0;clear: both}
table {border-collapse: collapse;border-spacing: 0}
.c {clear: both}
em {font-style: normal}
.clearfix:before,.clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.wrap {width: 98%;margin: 0px auto;}
.ones {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.twos {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
/*基本顯示屏幕（請編寫自定義代碼）*/
請在里面編寫代碼；
 
/*針對華為手機圖標無法正常比例縮放問題*/
@media screen and (max-device-width: 2100px) {
請在里面編寫代碼；
}
/*基本編寫順序*/
@media only screen and (max-width:1920px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:1660px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:1440px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:1366px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:1199px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:959px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:767px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:599px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:479px) {
      請在里面編寫代碼；
}
@media only screen and (max-width:374px) {
      請在里面編寫代碼；
}
 
作者：方維網(wǎng)絡前端工程師馮秋寧

方維網(wǎng)絡專注于移動端網(wǎng)站開發(fā)，響應式網(wǎng)站建設、自適應網(wǎng)站建設，歡迎有需要的客戶咨詢我們客服熱線400-800-9385