动态性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般就两种
先说总体放缩
总体放缩，实际上便是将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;
}
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小游戏源代码_互动小游戏微信_自制小游戏_html5游戏_制作游戏大概多少钱 版权所有 （网站地图） 粤ICP备10235580号