02移动端布局

  一、rem

     1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem

     2、rem 和 em 区别

          2.1 rem: root,以根节点(html)作为参照的尺寸

          2.2 em: 根据父级font-size确定大小     1em = 1font-size(父级的 )

     3、随着屏幕宽度的变化,改变HTML根元素font-size,从而控制rem值,从而达到相应效果(其他HTML子元素width等都是rem)

function autoRem(){
    var html = document.documentElement;     //documentElement返回文档根节点html
    var htmlWidth = html.getBoundingClientRect().width;     //getBoundingClientRect().width 包括width + padding * 2 + border * 2
    html.style.fontSize = htmlWidth / 16 + 'px';     //16 是根据自己页面设定,非固定使用,以方便后续计算为准(iPhone5中320屏幕,刚好可以整除,一个屏幕刚好16rem)
}
//从此,假设iPhone5测试,则html的font-size = 320 / 60 = 20px     则 1rem = 20px

二、使用LESS计算rem

     1、less使用方法:

          1.1 安装less运行环境(less是css预编译器,但是浏览器等没有其编译环境,需要将其编译成css文件,从而间接使用css)

               1.1.1 npm install -g less    详见less中文网

          1.2 完成less环境安装之后在本地书写需要的less文件,比如style.less

          1.3 打开命令窗口,切换到less文件所在文件夹,编译less成相应css文件     lessc style.less style.css     (lessc  less文件名 css文件名)

     2、利用less计算能力,计算rem

@r: 10rem;
.main{
    width: 400/@r;     //400px---->40rem
}

三、利用border-sizing布局

     1、量尺寸时,width包含住border等,然后正常设置border

     2、border-sizing: border-box;     //让border在width范围内绘制(content包含了width + padding + border)

下章续。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

15520
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第六天

31450
来自专栏子勰随笔

微信小程序开发之SVG的使用

2.4K110
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

33180
来自专栏哈雷彗星撞地球

iOS 知识小集(Status Bar变换)

iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求。而改变状态栏颜色和控制状态栏显示和隐藏的API,在iOS 的不同版本中也发生了很多变...

8720
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

16930
来自专栏vue学习

小程序 — 实现左滑删除效果①

(1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看;

75920
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

26690
来自专栏腾讯AlloyTeam的专栏

移动端输入框填坑系列(一)

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都...

2.6K00
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

23260

扫码关注云+社区

领取腾讯云代金券