如何編寫(xiě)自適應(yīng)網(wǎng)頁(yè)

　　現(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)題*/

　　@mediascreenand(max-device-width：2100px){

　　這是你要編寫(xiě)的代碼

　　}

　　Ps：因?yàn)樽髡吡私獾剑F(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ě)法）@charsetUTF-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：'MicrosoftYahei'，PingFangSC，HelveticaNeue，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：'MicrosoftYahei'，PingFangSC，HelveticaNeue，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：inset006pxrgba(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：0pxauto;}

　　.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)題*/

　　@mediascreenand(max-device-width：2100px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　/*基本編寫(xiě)順序*/

　　@mediaonlyscreenand(max-width：1920px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：1660px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：1440px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：1366px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：1199px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：959px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：767px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：599px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：479px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}

　　@mediaonlyscreenand(max-width：374px){

　　請(qǐng)?jiān)诶锩婢帉?xiě)代碼；

　　}