移动端rem布局实现(vw)
什么是rem?
在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”。
就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 1rem=16px ,10rem=160px 。rem的布局原理:
1.通过JS (JavaScript)
2.通过vw
这里我们通过vw进行实现
vw指的是view width 它是相对单位表示把屏幕自动分成了100vw宽,假设屏幕是375px对应 100vw那么1vw就等于3.75px。以iphone6为例:一个vw等于3.75px 那么100px经计算等于26.66667vw。
特点:不同设备可以等比缩放显示。实战rem布局
注:使用rem进行布局的时候,一定要在body中重置默认的font-size大小。
选择iphone6的html的font-size为100是为了好算。也可以用工具辅助开发。
vsCode中去下载一个插件 -> px to rem -> 在设置把对应的font-size设置下。
-> alt + z进行px转rem的操作。我们按照iphone6设备进行
开始前设置font-size值:项目编写时整篇代码以px单位进行,最终转换为rem单位即可
px:rem:
实现心得
对于我这个只学习了四个星期的小白来说实现rem布局并不复杂/>.<//! 也希望在逆战班能继续不断的努力学习!加油吧
移动端rem布局实现(vw)的更多相关文章
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 关于移动端rem 布局的一些总结
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
随机推荐
- 前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- C++对拍
作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...
- 【面试必备】硬核!30 张图解 HTTP 常见的面试题
每日一句英语学习,每天进步一点点: 前言 在面试过程中,HTTP 被提问的概率还是比较高的.小林我搜集了 5 大类 HTTP 面试常问的题目,同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大 ...
- JavaScript的数组系列
数组 今天逆战班的学习主题关于Javascript的数组,主要有数组的概念.创建.分类.方法.遍历.经典算法...... 一.数组是什么呢?怎么写数组呢?数组有多少种呢? 数组的概念 对象是属性的无序 ...
- MacOS麦克风输入监听的方法
Windows上很多人都知道,然而实际上并没什么用——延迟太大,根本没法用. MacOS上有两种方法: QuickTime Player新建音频录制(不需要真的录音),如下图: 这个方法和Window ...
- Java基础面试系列(一)
Java基础面试总结(一) 1. 面向对象和面向过程的区别 面向过程 面向对象 性能 高于面向对象 类加载的时候需要实例化,比较消耗资源 三易(易维护,易复用,易扩展) 不如面向对象 具有封装,继承, ...
- 什么是SSH与SSH客户端
1.什么是SSH? SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SS ...
- 基于osg的python三维程序开发(二)------向量
上一篇文章展示了如何简单创建一个osg python 程序, 本篇展示了了一些基础数据结构的使用: from pyosg import * vec = osg.Vec3Array() #push ba ...
- 去除 inline-block 元素间距
案例重现 布局时经常能发现inline元素和inline-block元素水平呈现的元素间,会存在着一些意想不到的间距,举例: .inline-block { display: inline-block ...
- 浏览器的重绘与回流(Reflow & Repaint)介绍
重绘 当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流 当改变 ...