资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/移动端布局之动态rem

移动端布局之动态rem

番茄西红柿 / 1342人阅读

摘要：注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为。

动态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的宽度，实现了整体缩放

为了看到效果，要将这一部分删除

</>复制代码 
  1.  <style>
  2.         div{
  3.             width:980px;
  4.             margin:0 auto;
  5.             background:#f0f0f0;
  6.         }
  7.         ul{
  8.             list-style:none;
  9.         }
  10.         li{
  11.             float:left;
  12.             margin-left:10px;    
  13.         }
  14.         clearfix::after{
  15.             content:"";
  16.             display:block;
  17.             clear:both;
  18.         }
  19.     style>
  20. head>
  21. <body>
  22.     <div>
  23.         <ul>
  24.             <li>选项1li>
  25.             <li>选项2li>
  26.             <li>选项3li>
  27.             <li>选项4li>
  28.             <li>选项5li>
  29.             <li>选项6li>
  30.         ul>
  31.     div>
  32. body>

但这种整体缩放的用户体验并不好，所以pass，我们来讲百分比布局

百分比布局

</>复制代码 
  1. //百分比布局
  2. <style>
  3.         .child{
  4.             background-color:#ccc;
  5.             text-align:center;
  6.             width:40%;
  7.             margin:10px 5%;
  8.             float:left;
  9.         }
  10.         .clearfix::after{
  11.             content:"";
  12.             display:block;
  13.             clear:both;
  14.         }
  15.     style>
  16. head>
  17. <body>
  18.     <div class="parent clearfix">
  19.         <div class="child">选项1div>
  20.         <div class="child">选项2div>
  21.         <div class="child">选项3div>
  22.         <div class="child">选项4div>
  23.     div>
  24. body>

可以看到百分比布局能自动适应屏幕宽度。

但是百分比布局有个缺点，宽度和高度不能做任何关联

可以看上面的gif图，宽度一直变长，然而高度没有变化

为了让选项方块的高度是宽度的一半，实现该效果我们需要知道屏幕的宽度，再来确定选项的宽度和高度

这里可以使用vw，但vw的兼容性比较差，我们可以使用rem来代替vw

首先rem是以html的font-size为基准的，所以我们可以让html的font-size==pageWidth

</>复制代码 
  1. <script>
  2. let pageWidth = window.innerWidth;
  3.     document.write(<style>html{font-size:+ pageWidth/10 +px}style>)
  4. script>

为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px;

按如上改动代码

</>复制代码 
  1. <style>
  2. .child{
  3.             background-color:#ccc;
  4.             text-align:center;
  5.             width:4rem;
  6.             height:2rem;
  7.             margin:10px 0.05rem;
  8.             float:left;
  9.             line-height:2rem;
  10.         }
  11.         .clearfix::after{
  12.             content:"";
  13.             display:block;
  14.             clear:both;
  15.         }
  16. style>
  17. head>
  18. <body>
  19.     <div class="parent clearfix">
  20.         <div class="child">选项1div>
  21.         <div class="child">选项2div>
  22.         <div class="child">选项3div>
  23.         <div class="child">选项4div>
  24.     div>
  25. body>

效果入图

可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为rem。这里我们就要scss来换算px了

3.scss动态换算px 
</>复制代码 
  1. @function pxToRem($px){
  2.     @return $px/$designWidth*10+rem;//10是把整个屏幕分为10rem
  3. }
  4. $designWidth:320;//设计稿宽度
  5. .child{
  6.     background-color:#ccc;
  7.     text-align:center;
  8.     width:pxToRem(128);//4rem;
  9.     height:pxToRem(64);//2rem;
  10.     margin: 10px pxToRem(1.6);
  11.     float:left;
  12.     line-height:pxToRem(64);
  13. }
  14. .clearfix::after{
  15.     content:"";
  16.     display:block;
  17.     clear:both;
  18. }
结语

因为本人水平有限，如果有错漏的地方，还请看官多多指正

本文作者胡志武，写于2019/5/20，如果要转载，请注明出处，

如果觉得写的不错， 请点个赞吧

GPU云服务器 云服务器 移动端布局 web移动端布局 rem布局 动态rem

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7079.html

相关文章

  • 移动端布局之动态rem

    摘要：注意不能做到屏幕的百分之。因为浏览器的最小是按如上改动代码选项选项选项选项效果入图可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为。动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size rem 全称root em 是根元...

    huangjinnan 评论0 收藏0

  • 移动端自适应布局方案

    摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。 背景 现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。 开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

    zacklee 评论0 收藏0

  • 移动端布局方案探究

    摘要：欢迎大家学习交流地址我的博客参考文献移动前端开发之的深入理解原创移动端高清多屏适配方案手机端页面根据和宽度计算出对应数值语法 研究了淘宝，天猫和网易彩票163的wap主页样式布局，总结移动端布局方案注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开 当时做的ppt下载: 2015年12月移动端布局方案探究 一、基本...

    yzzz 评论0 收藏0

  • 从零搭建移动H5开发项目实战

    摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

    terro 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<