挪动端合理布局之动态性rem的完成

日期:2021-02-28 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

动态性rem

1. 最先大家先详细介绍当下的长度企业

px 像素

em 1个M的宽度 / 1个中国汉字的宽度 1em == 本身的 font-size

rem 全称 root em 是根元素(html)的 font-size

vh 全称 viewport height 100vh == 视口高宽比

vw 全程 viewport width 100vw == 视口宽度

由于网页页面的默认设置font-size: 16px 因此1rem默认设置是 16px chrome 的最少字体样式像素默认设置是 12px

1个元素在沒有设定font-size的状况下会去承继父元素的font-size

2. 挪动端合理布局

挪动端合理布局1般就两种

  • 1是总体放缩
  • 2是百分比合理布局

 先说总体放缩

总体放缩,实际上便是将pc端网页页面变小得手机端显示屏能看到网页页面全貌的尺寸

iPhone手机上刚出来时便是应用这类合理布局,iPhone企业科学研究发现全球上大多数数的网页页面宽度是980px,但是iPhone手机上的宽度像素是320px,因此iPhone手机上的访问器用320像素的显示屏宽度去仿真模拟980px的宽度,完成了总体放缩

以便看到实际效果,要将 <meta name="viewport"> 这1一部分删掉

 <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>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
            <li>选项5</li>
            <li>选项6</li>
        </ul>
    </div>
</body>

但这类总体放缩的客户体验其实不好,因此pass,大家来说百分比合理布局

百分比合理布局

//百分比合理布局
<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">选项1</div>
        <div class="child">选项2</div>
        <div class="child">选项3</div>
        <div class="child">选项4</div>
    </div>
</body>

能够看到百分比合理布局能全自动融入显示屏宽度。

可是百分比合理布局有个缺陷,宽度和高宽比不可以做任何关系

能够看上面的gif图,宽度1直变长,但是高宽比沒有转变

以便让选项方块的高宽比是宽度的1半,完成该实际效果大家必须了解显示屏的宽度,再来明确选项的宽度和高宽比

这里可使用vw,但vw的适配性较为差,大家可使用rem来替代vw

最先rem是以html的font-size为标准的,因此大家可让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。由于访问器的最少 font-size是12px ;

按如上修改编码

<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">选项1</div>
        <div class="child">选项2</div>
        <div class="child">选项3</div>
        <div class="child">选项4</div>
    </div>
</body>

实际效果入图

能够看到宽度和高宽比都能按百分比转变了,可是大家会发现1个很不便的物品,设计方案师给大家的设计方案稿,大家却务必把每一个元素的像素企业换算为rem。这里大家就要scss来换算px了

3.scss动态性换算px

@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把全部显示屏分成10rem
}
$designWidth:320;//设计方案稿宽度
.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;

}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。