国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)端布局之動(dòng)態(tài)rem

huangjinnan / 2298人閱讀

摘要：注意不能做到屏幕的百分之。因?yàn)闉g覽器的最小是按如上改動(dòng)代碼選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會(huì)發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為。

動(dòng)態(tài)rem 1. 首先我們先介紹當(dāng)下的長(zhǎng)度單位

px 像素

em 一個(gè)M的寬度 / 一個(gè)漢字的寬度 1em == 自身的font-size

rem 全稱root em 是根元素（html)的font-size

vh 全稱viewport height 100vh == 視口高度

vw 全程 viewport width 100vw == 視口寬度

因?yàn)榫W(wǎng)頁(yè)的默認(rèn)font-size：16px 所以1rem默認(rèn)是16pxchrome 的最小字體像素默認(rèn)是12px

一個(gè)元素在沒(méi)有設(shè)置font-size的情況下會(huì)去繼承父元素的font-size

2. 移動(dòng)端的布局

移動(dòng)端的布局一般就兩種

一是整體縮放

二是百分比布局

先說(shuō)整體縮放

整體縮放，其實(shí)就是將pc端的網(wǎng)頁(yè)縮小到手機(jī)端屏幕能看到網(wǎng)頁(yè)全貌的大小

蘋果手機(jī)剛出來(lái)時(shí)就是使用這種布局，蘋果公司研究發(fā)現(xiàn)世界上大多數(shù)的網(wǎng)頁(yè)寬度是980px，然而蘋果手機(jī)的寬度像素是320px，所以蘋果手機(jī)的瀏覽器用320像素的屏幕寬度去模擬980px的寬度，實(shí)現(xiàn)了整體縮放

為了看到效果，要將這一部分刪除

 <style>
        div{
            width:980px;
            margin:0 auto;
            background:#f0f0f0;
        }
        ul{
            list-style:none;
        }
        li{
            float:left;
            margin-left:10px;    
        }
        clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    style>
head>
<body>
    <div>
        <ul>
            <li>選項(xiàng)1li>
            <li>選項(xiàng)2li>
            <li>選項(xiàng)3li>
            <li>選項(xiàng)4li>
            <li>選項(xiàng)5li>
            <li>選項(xiàng)6li>
        ul>
    div>
body>

但這種整體縮放的用戶體驗(yàn)并不好，所以pass，我們來(lái)講百分比布局

百分比布局

//百分比布局
<style>
        .child{
            background-color:#ccc;
            text-align:center;
            width:40%;
            margin:10px 5%;
            float:left;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    style>
head>
<body>
    <div class="parent clearfix">
        <div class="child">選項(xiàng)1div>
        <div class="child">選項(xiàng)2div>
        <div class="child">選項(xiàng)3div>
        <div class="child">選項(xiàng)4div>
    div>
body>

可以看到百分比布局能自動(dòng)適應(yīng)屏幕寬度。

但是百分比布局有個(gè)缺點(diǎn)，寬度和高度不能做任何關(guān)聯(lián)

可以看上面的gif圖，寬度一直變長(zhǎng)，然而高度沒(méi)有變化

為了讓選項(xiàng)方塊的高度是寬度的一半，實(shí)現(xiàn)該效果我們需要知道屏幕的寬度，再來(lái)確定選項(xiàng)的寬度和高度

這里可以使用vw，但vw的兼容性比較差，我們可以使用rem來(lái)代替vw

首先rem是以html的font-size為基準(zhǔn)的，所以我們可以讓html的font-size==pageWidth

<script>
	let pageWidth = window.innerWidth;
    document.write("<style>html{font-size:"+ pageWidth/10 +"px}style>")
script>

為了更好的使用rem,這里1rem等于屏幕寬度的10分之1。注意不能做到1rem==屏幕的百分之1。因?yàn)闉g覽器的最小font-size是12px;

按如上改動(dòng)代碼

<style>
.child{
            background-color:#ccc;
            text-align:center;
            width:4rem;
            height:2rem;
            margin:10px 0.05rem;
            float:left;
            line-height:2rem;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;

        }
style>
head>
<body>
    <div class="parent clearfix">
        <div class="child">選項(xiàng)1div>
        <div class="child">選項(xiàng)2div>
        <div class="child">選項(xiàng)3div>
        <div class="child">選項(xiàng)4div>
    div>
body>

效果入圖

可以看到寬度和高度都能按百分比變化了，但是我們會(huì)發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為rem。這里我們就要scss來(lái)?yè)Q算px了

3.scss動(dòng)態(tài)換算px 
@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把整個(gè)屏幕分為10rem
}
$designWidth:320;//設(shè)計(jì)稿寬度
.child{
    background-color:#ccc;
    text-align:center;
    width:pxToRem(128);//4rem;
    height:pxToRem(64);//2rem;
    margin: 10px pxToRem(1.6);
    float:left;
    line-height:pxToRem(64);
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;

}
結(jié)語(yǔ)

因?yàn)楸救怂接邢蓿绻绣e(cuò)漏的地方，還請(qǐng)看官多多指正

本文作者胡志武，寫于2019/5/20，如果要轉(zhuǎn)載，請(qǐng)注明出處，

如果覺(jué)得寫的不錯(cuò)， 請(qǐng)點(diǎn)個(gè)贊吧

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/6736.html

相關(guān)文章

  • 移動(dòng)端布局之動(dòng)態(tài)rem

    摘要：注意不能做到屏幕的百分之。因?yàn)闉g覽器的最小是按如上改動(dòng)代碼選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會(huì)發(fā)現(xiàn)一個(gè)很麻煩的東西，設(shè)計(jì)師給我們的設(shè)計(jì)稿，我們卻必須把每個(gè)元素的像素單位換算為。動(dòng)態(tài)rem 1. 首先我們先介紹當(dāng)下的長(zhǎng)度單位 px 像素 em 一個(gè)M的寬度 / 一個(gè)漢字的寬度 1em == 自身的font-size rem 全稱root em 是根元...

    番茄西紅柿 評(píng)論0 收藏0

  • 移動(dòng)端自適應(yīng)布局方案

    摘要：背景現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括嵌入頁(yè)，微信頁(yè)面和移動(dòng)頁(yè)。經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了布局來(lái)解決移動(dòng)端自適應(yīng)布局的問(wèn)題。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。 背景 現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開(kāi)發(fā)，包括app嵌入頁(yè)，微信頁(yè)面和移動(dòng)wap頁(yè)。 開(kāi)發(fā)移動(dòng)端頁(yè)面跟開(kāi)發(fā)PC頁(yè)面的一個(gè)大區(qū)別就是移動(dòng)端對(duì)響應(yīng)式布...

    zacklee 評(píng)論0 收藏0

  • 移動(dòng)端布局方案探究

    摘要：歡迎大家學(xué)習(xí)交流地址我的博客參考文獻(xiàn)移動(dòng)前端開(kāi)發(fā)之的深入理解原創(chuàng)移動(dòng)端高清多屏適配方案手機(jī)端頁(yè)面根據(jù)和寬度計(jì)算出對(duì)應(yīng)數(shù)值語(yǔ)法 研究了淘寶，天貓和網(wǎng)易彩票163的wap主頁(yè)樣式布局，總結(jié)移動(dòng)端布局方案注意：代碼運(yùn)行是file協(xié)議，在chrome里不支持引用本地文件，會(huì)提示跨域錯(cuò)誤，可以用firefox或者Safari打開(kāi) 當(dāng)時(shí)做的ppt下載: 2015年12月移動(dòng)端布局方案探究 一、基本...

    yzzz 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開(kāi)始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開(kāi)發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開(kāi)發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無(wú)疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開(kāi)發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<