摘要:注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了,但是我们会发现一个很麻烦的东西,设计师给我们的设计稿,我们却必须把每个元素的像素单位换算为。
动态rem 1. 首先我们先介绍当下的长度单位px 像素
em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size
rem 全称root em 是根元素(html)的font-size
vh 全称viewport height 100vh == 视口高度
vw 全程 viewport width 100vw == 视口宽度
因为网页的默认font-size:16px 所以1rem默认是16pxchrome 的最小字体像素默认是12px
一个元素在没有设置font-size的情况下会去继承父元素的font-size
2. 移动端的布局移动端的布局一般就两种
一是整体缩放
二是百分比布局
整体缩放,其实就是将pc端的网页缩小到手机端屏幕能看到网页全貌的大小
苹果手机刚出来时就是使用这种布局,苹果公司研究发现世界上大多数的网页宽度是980px,然而苹果手机的宽度像素是320px,所以苹果手机的浏览器用320像素的屏幕宽度去模拟980px的宽度,实现了整体缩放
为了看到效果,要将这一部分删除
<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>选项1li>
<li>选项2li>
<li>选项3li>
<li>选项4li>
<li>选项5li>
<li>选项6li>
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">选项1div>
<div class="child">选项2div>
<div class="child">选项3div>
<div class="child">选项4div>
div>
body>
可以看到百分比布局能自动适应屏幕宽度。
但是百分比布局有个缺点,宽度和高度不能做任何关联
可以看上面的gif图,宽度一直变长,然而高度没有变化
为了让选项方块的高度是宽度的一半,实现该效果我们需要知道屏幕的宽度,再来确定选项的宽度和高度
这里可以使用vw,但vw的兼容性比较差,我们可以使用rem来代替vw
首先rem是以html的font-size为基准的,所以我们可以让html的font-size==pageWidth
<script>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">选项1div>
<div class="child">选项2div>
<div class="child">选项3div>
<div class="child">选项4div>
div>
body>
效果入图
可以看到宽度和高度都能按百分比变化了,但是我们会发现一个很麻烦的东西,设计师给我们的设计稿,我们却必须把每个元素的像素单位换算为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; }结语
因为本人水平有限,如果有错漏的地方,还请看官多多指正
本文作者胡志武,写于2019/5/20,如果要转载,请注明出处,
如果觉得写的不错, 请点个赞吧
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/6736.html
摘要:注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了,但是我们会发现一个很麻烦的东西,设计师给我们的设计稿,我们却必须把每个元素的像素单位换算为。动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size rem 全称root em 是根元...
摘要:背景现在工作中有超过一半的时间用于移动端项目的开发,包括嵌入页,微信页面和移动页。经过研究,我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位,布局是一个流行的解决移动端响应式布局的方案。 背景 现在工作中有超过一半的时间用于移动端项目的开发,包括app嵌入页,微信页面和移动wap页。 开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...
摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...
阅读 1319·2021-11-04 16:11
阅读 2993·2021-10-12 10:11
阅读 2904·2021-09-29 09:47
阅读 1532·2021-09-22 15:40
阅读 980·2019-08-29 15:43
阅读 2754·2019-08-29 13:50
阅读 1544·2019-08-29 13:28
阅读 2660·2019-08-29 12:54