移动端布局概念的详解

大家好,我们是逆战班的,接下来讲解的是什么是移动端布局
百分比弹性布局:
移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样
所有不能使用网页的固定尺寸来布局 需要使用百分比来布局
移动端布局的优缺点
优点:
移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点
移动端宽高尺寸不同 因此测量尺寸成为了一个难题 无法非常精确的写尺寸
新单位 rem
rem是永远获取html的font-size值
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
w,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
要移动端尺寸显示正常需要加上以下meta

流式布局:
流式布局,顾名思义就是流动的布局,随着屏幕窗口的大小页面的内容像水一样的流动,但不影响整体的布局。
简单的来说就是百分比布局,非固定像素,内容向两侧填充的一种布局。
但是目前使用流式布局的公司非常多,比如 亚马逊 、京东 、携程
好处: 大屏幕下显示更多的内容。
坏处:宽屏下比例会有一些不协调。
rem布局
rem布局,宽高自适应,能实现整个页面像一张图片一样缩放且不失真的效果。
与less配合使用更加方便,目前使用rem布局的有:淘宝 、 苏宁
好处: 大屏幕下显示更多的内容。
坏处:宽屏下比例会有一些不协调。’
单位:
em:是一个相对单位,1em等于当前元素或父元素的font-size值。若当前元素没有设置font-size,则一层一层网上找,直到有父元素设置font-size。

rem:是一个相对单位,1rem等于根元素(即html)的font-size值

vw/vh:把屏幕分成100份,1vw等于屏幕宽的1%
如何做到font-size动态化?

  1. 通过JS (JavaScript)
    ocument.documentElement.clientWidth -> 获取布局视口的宽度。
    在iphone 6 -> document.documentElement.clientWidth -> 375
    在iphone 6 plus -> document.documentElement.clientWidth -> 414

    在iphone 6 -> font-size 100px ?
    document.documentElement.clientWidth(375) / 3.75 -> 100

    在iphone 6 plus -> font-size 大于 100px ?
    document.documentElement.clientWidth(414) / 3.75 -> 110.4

  2. 通过vw (vw是尺寸单位)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值