移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图:
①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部)
②:flex (更多的用于复杂页面的布局。具体参照阮一峰大神写的-Flex 布局教程:语法篇和实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool (语法篇)
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (实例篇)
③:媒体查询(css3 media媒体查询器用法总结:http://www.bubuko.com/infodetail-268180.html
注:flex布局和媒体查询以及接下来要讲的rem都可以实现移动端的日常响应式开发
推荐使用flex布局或rem来实现移动端的响应式开发,因为媒体查询要单独针对不同的分辨率写相应的样式,你懂得
Rem:(等比例缩放)【推荐】
以下是我在学习rem的过程当中看过的2篇写得比较好的文章,内容易理解,也比较全面,适合入门。
看完以后,对rem就了解得差不多了,所以就不再赘述。
https://www.jianshu.com/p/b00cd3506782 手机端页面自适应解决方案—rem布局基础篇
https://www.jianshu.com/p/985d26b40199 手机端页面自适应解决方案—rem布局进阶版
补充:(字体大小建议根据实际情况来决定使用rem或px)
rem一般用于设置根元素字体大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。 因此,rem是一个相对长度单位,当改变html根元素的字体大小时,所有以rem为单位的都会随之放大或缩小。 首先你需要知道rem是指页面根元素的字体大小,即html的font-size,默认情况下,html的font-size是16px,相当于1rem = 16px; 但有一种情况需要考虑,即:如果rem被改变时。比如你引入的第三方UI组件或插件中设置了html的font-size:100px; 那么此时的1rem = 100px;会覆盖浏览器默认的1rem = 16px; 如果引入第三方UI组件或插件单位用的px,还需要全部转换成rem |
最新文章
- 西秦的ACE-Python教程 一、Python本地开发环境部署
- nyoj 82 迷宫寻宝(一)
- 防止vuejs在解析时出现闪烁
- Java 实现Md5算法
- Java线程:什么是线程
- iOS 友盟推送,应用内推送启动图推送闪动黑屏,插屏推送方法报错
- TP手册学习第二天
- ThreadLocal 原理和使用场景分析
- @vue-cli3创建项目报错:ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di
- Androidstudio 使用git插件提交代码
- vant的坑
- sql server替换字段中的某个字符
- Linux LVM使用小记
- jquery 遍历 json【转】
- [转]magento性能优化
- jsencrypt加密
- Android map转json格式,附上Jackson包下载地址,导入过程
- CSS3 的calc()方法的使用
- VMware Workstation 11 中 Ubuntu 14.04 的 VMware Tools 问题 :没有显示共享文件夹
- google glog 使用方法