手机端常见的布局方案

rem布局

rem布局的原理：

本质是等比缩放，rem作用于根元素字体大小

1）假设屏幕宽度为750px，将屏幕平分为10份，1rem=75px，根元素的fontSize大小为75px

html {font-size: 75px}
div {width: 1rem} // div {width: 75px}

2）利用js动态的设置html的font-size

// 设置html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 +?'px'

rem布局的缺点

字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，会出现随着屏幕的变大，字体变的越来越大，所以需要结合媒体查询来调整字体大小

rem+vw布局

优势

1）使用纯css的方式来实现，避免使用js动态计算html根元素font-size大小
2）结合使用媒体查询，解决宽屏下（如ipad）字体过大的问题

rem+vw布局的原理

1）设计稿为750px时，rootValue设置为75，则屏幕宽为10rem，1rem=75px，根元素的fontSize大小为75px

2）屏幕总共有100vw，所以1vw为7.5px ，10vw为75px，得出1rem为10vw，故得到根元素的fontSize为10vw

在项目入口文件中引入flexible.less中，flexible.less代码如下

@base_fontSize: 10vw;html{font-size: @base_fontSize;
}
// 使用媒体查询，解决ipad屏幕下（宽屏）字体过大的问题
@media screen and (min-width: 560px) {  html{font-size: @base_fontSize * 0.7 }
}

手机端常见的布局方案相关推荐

css fix 手机端,移动端布局fixed问题解决方案
今天测试忽然提了一个bug,关于position:fixed的问题,一般情况下使用并没问题,当页面出现表单时,由于弹出键盘,整个页面会出现布局错位问题,或者含有fixed的模块会空白(ios11比较明 ...
园区导航系统-室内外一体化定位导航-蓝牙+手机端室内定位导航方案
园区3D室内系统通过构建一个虚拟3D可视化虚拟场景地图为基础,实现的功能:路线导航(同楼层/跨楼层/跨楼宇).楼层切换.公共设施查询.语音播报.地图旋转.2D/3D切换,位置点定位等功能. 图片来源: ...
利用TeamViewer实现电脑和手机端文件互传
利用TeamViewer实现电脑和手机端文件互传方案对比选择方案对比选择不少人有台式电脑传文件到手机的需求. 可用微信.QQ传文件到手机,但两年前它们对大文件传递进行了限制(局域网传递还限制,会 ...
移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
html+手机自适应源码,手机端页面自适应解决方案—rem布局（进阶版，附源码示例）...
一年前笔者写了一篇 <手机端页面自适应解决方案-rem布局>,意外受到很多朋友的关注和喜欢.但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem ...
帝国cms7.5电脑端手机端多终端解决方案之选择哪种方案
制作电脑站和手机端通常有三种方式, 1.代码适配:服务程序端,即通过php动态程序,根据ua来判断来自于电脑还是手机,根据终端类型来渲染不同的模板界面;这种电脑和手机端的url是保持一致的,但程序必须 ...
前端切图:手机端自适应布局demo
手机端自适应布局demo 原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html><head><met ...

手机端常见的布局方案

手机端常见的布局方案相关推荐

最新文章

热门文章