前端頁(yè)面基礎(chǔ)樣式

科技千變?nèi)f化辟宗，手機(jī)日新月異；生活中發(fā)生的變化很是明顯吝秕，從最初的上網(wǎng)需要在電腦上瀏覽信息泊脐，再到現(xiàn)在手機(jī)亮屏就能上網(wǎng)瀏覽信息很是方便。手機(jī)也從最初占據(jù)多半屏幕的實(shí)體鍵盤(pán)且只能用來(lái)?yè)艽螂娫?huà)和發(fā)送信息烁峭，發(fā)展到目前的虛擬按鍵而且可以實(shí)現(xiàn)3G/4G到5G網(wǎng)絡(luò)和安裝各種手機(jī)應(yīng)用APP容客。
基于此秕铛，移動(dòng)端的需求也是非常龐大的。作為前端開(kāi)發(fā)者缩挑，移動(dòng)端的頁(yè)面占據(jù)的也是越來(lái)越多但两，相信大家也會(huì)經(jīng)常去開(kāi)發(fā)移動(dòng)端的頁(yè)面。下面貼出各個(gè)代碼供置，很簡(jiǎn)單谨湘，但很重要。

由于歷史的原因芥丧，我們的手機(jī)在訪問(wèn)網(wǎng)頁(yè)時(shí)紧阔，不管你是響應(yīng)式網(wǎng)頁(yè)還是非響應(yīng)式，瀏覽器都會(huì)將你的寬度改為980px续担。

這是歷史遺留的問(wèn)題擅耽，因?yàn)樽钤绲闹悄苁謾C(jī)為了完整的顯示一個(gè)網(wǎng)頁(yè)，直接將PC上的網(wǎng)頁(yè)縮放塞進(jìn)手機(jī)瀏覽器中物遇，經(jīng)過(guò)調(diào)研乖仇，發(fā)現(xiàn)大部分的網(wǎng)頁(yè)都是980px左右，所以當(dāng)我們用手機(jī)訪問(wèn)網(wǎng)頁(yè)時(shí)寬度都會(huì)被縮放到980px询兴。

我們只需要在移動(dòng)端頁(yè)面加上這樣一行代碼就可以解決問(wèn)題

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width（設(shè)置頁(yè)面寬度為設(shè)備寬度）
user-scalable=no（不允許用戶(hù)縮放）
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0（默認(rèn)縮放比例為1乃沙， 最大縮放比例為1，最小縮放比例為1蕉朵。）

移動(dòng)端

根據(jù)此代碼可實(shí)現(xiàn)移動(dòng)端多尺寸自適應(yīng)：

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
/* 設(shè)計(jì)稿px換算直接/100即可得到rem值崔涂。移動(dòng)平臺(tái)*/ 
    @media all and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media all and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media all and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media all and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media all and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media all and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }

響應(yīng)式

此代碼可判斷設(shè)備尺寸大小實(shí)現(xiàn)移動(dòng)端、平板電腦始衅、pc不同樣式：

html{font-size: 100px;}
/* 需要把得到的像素值/100px,轉(zhuǎn)換為rem單位冷蚂。多終端響應(yīng)式*/
    @media only screen and (min-width: 320px) and (max-width: 767px) {
       .div{
           font-size: 0.12rem;
       }
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px){
        .div{
            font-size: 0.14rem;
        }
    }
    @media only screen and (min-width:1024px) {
        .div{
            font-size: 0.16rem;
        }
    }

自適應(yīng)

此代碼可使內(nèi)容自適應(yīng)屏幕：

html{font-size:10px;}/*1rem等于10px。固定尺寸用px汛闸，自適應(yīng)用rem*/
.div{/*此處為固定尺寸*/
    width:100px;
    height:100px;
}
.div{/*此處為自適應(yīng)*/
    width:10rem;
    height:10rem;
}

以上代碼均已測(cè)試蝙茶，頁(yè)面開(kāi)發(fā)前必備

下面再附上js與sass自動(dòng)計(jì)算轉(zhuǎn)換

js代碼實(shí)現(xiàn)自適應(yīng)

var width=document.documentElement.clientWidth;
    document.write(`<style>html{font-size:${width / 10}px</style>`)

JS代碼就兩行，將rem設(shè)置為手機(jī)寬度的的10%诸老，雖然設(shè)置width / 100可以完全模擬vw（自適應(yīng)不用vw是因?yàn)関w兼容性太差了）隆夯，但是當(dāng)em為1%時(shí)，一但寬度小于120px時(shí)别伏，font-size就會(huì)小于12px蹄衷，低于chrome默認(rèn)的最小font-size就會(huì)出現(xiàn)bug，所以我們?cè)O(shè)置rem為10%厘肮。

還需要注意的是雖然width和height是用rem使用愧口，但是不代表別的大小也需要用rem（如果字體的font-size也用rem，那當(dāng)寬度很小時(shí)类茂，字會(huì)小的看不清）耍属，我們應(yīng)該搭配別的單位以獲得更美觀的效果托嚣。

使用SCSS自動(dòng)轉(zhuǎn)換px

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640。

.box{
  background: grey;
  width: px(256);
  height: px(128);
  margin: px(32) px(32);
  float: left;
}

為了減少我們計(jì)算量厚骗，我們可以直接使用scss寫(xiě)一個(gè)function幫我們解決轉(zhuǎn)換的問(wèn)題示启。
————————————————
版權(quán)聲明：本文為CSDN博主「Web開(kāi)發(fā)者」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議领舰，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明夫嗓。
原文鏈接：https://blog.csdn.net/weixin_44040250/article/details/103643717