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

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

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


這是兼容4k屏幕到手機(jī)端的寫(xiě)法。

你必須要知道的點(diǎn)：

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

二，總結(jié)此次項(xiàng)目遇見(jiàn)的問(wèn)題

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

三，分享一個(gè)干貨（自適應(yīng)樣式的基本寫(xiě)法）

@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}
/*定義滾動(dòng)條*/
.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;}
/*基本顯示屏幕（請(qǐng)編寫(xiě)自定義代碼）*/
請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
 
/*針對(duì)華為手機(jī)圖標(biāo)無(wú)法正常比例縮放問(wèn)題*/
@media screen and (max-device-width: 2100px) {
請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
/*基本編寫(xiě)順序*/
@media only screen and (max-width:1920px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:1660px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:1440px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:1366px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:1199px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:959px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:767px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:599px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:479px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
@media only screen and (max-width:374px) {
      請(qǐng)?jiān)诶锩婢帉?xiě)代碼；
}
 
作者：方維網(wǎng)絡(luò)前端工程師馮秋寧

方維網(wǎng)絡(luò)專(zhuān)注于移動(dòng)端網(wǎng)站開(kāi)發(fā)，響應(yīng)式網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站建設(shè)，歡迎有需要的客戶(hù)咨詢(xún)我們客服熱線(xiàn)400-800-9385