如何編寫自適應網頁

現(xiàn)在的上線網站，自適應網站占有了一定比例。作為一個菜鳥前端，這段時間編寫了一個靜態(tài)的自適應網頁。對此，寫下這篇文章。文章主要講一些自適應網頁基本原理和總結一些項目中遇見的問題。一，自適應網頁基本原理我是由2個問題出發(fā)的：
問題1：自適應網頁由什么構成？
簡單來說，自適應網頁和pc網頁，移動端網頁是一樣，都是由js、css、html構成。
問題2：如何讓網頁自適應？
我所理解的自適應網頁就是這個網頁可以兼容所有的屏幕，在用戶的屏幕上排版流利、順暢。正常顯示。不會給用戶一種別扭的感覺。
那么為了能夠讓網頁兼容各大頁面。你可以使用css的media。

下面我列舉一下最基本的主流屏幕，在css里面應該怎么寫。這是兼容4k屏幕到手機端的寫法。你必須要知道的點：1.
這是從2560px 到 手機端 的寫法；2.
media的像素大小必須由大到小排列：3.
首先，編寫常規(guī)的格式，即清除一些css的默認樣式；再來，編寫2560px時，樣式的變化；接著，往小屏幕編寫代碼。最后，測試即可。二，總結此次項目遇見的問題此次項目主要遇見2個問題：
問題1：測試時，用戶發(fā)現(xiàn)在自己的華為pus10上沒辦法正常顯示。
解決方法：經過一系列的百度和搜狗。最后發(fā)現(xiàn)華為pu10它的分辨率比正常手機大很多，像素為1920*1080，因此要在編寫1920px的media之前，寫下一些代碼：
/*針對華為手機圖標無法正常比例縮放問題*/
@media screen and (max-device-width: 2100px) {
這是你要編寫的代碼
}
Ps：因為作者了解到，現(xiàn)在市場上流通常見的手機屏幕大高達2100px，所以，上面的寫法可以很好的兼容（2100到最小手機端）。
問題2：關于項目中輪播圖的問題。
這個解決方法有點長，先省略。
三，分享一個干貨（自適應樣式的基本寫法）@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) {
請在里面編寫代碼；
}
作者：創(chuàng)新互聯(lián)前端工程師馮秋寧
創(chuàng)新互聯(lián)專注于移動端網站開發(fā)，響應式網站建設、自適應網站建設，歡迎有需要的客戶咨詢我們客服熱線400-028-6601

文章名稱：如何編寫自適應網頁
當前地址：http://www.bm7419.com/news11/236411.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制開發(fā)、網站策劃、外貿建站、品牌網站建設、外貿網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)