移动端REM布局方案

引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案

下载地址https://github.com/hupan508/lib-flexible

注意点。

　　1、如果html设置过 meta ，js将使用meta 标签的缩放。

　　　　如果加入meta字体写一种px就可以

　　　　关于媒体查询在不同设备下使用图片请查看

　　　　http://www.uigreat.com/api/client_manager/index.php?aid=239&module=content&wenzhang

　　　　常见媒体查询

　　　　https://segmentfault.com/a/1190000002711737

　　2、cssrem

　　　　使用cssrem工具，换算px--rem

　　　　修改换算比例

　　　　参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

　　px_to_rem - px转rem的单位比例，默认为40。
max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

　　把视觉稿中的px转换成rem

　　　　首先，目前视觉稿大小分为640，750以及，1125这三种。

　　　　当前方案会把这3类视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。拿750的视觉稿举例：

　　　　1a = 7.5px1rem = 75px

　　　　因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。例如240px * 120px的元素，最后转换为3.2rem * 1.6rem。

　　　　3、

转载于:https://www.cnblogs.com/hupan508/p/6159206.html

移动端REM布局方案相关推荐

第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
使用两种rem布局方案-实现静态苏宁易购移动端首页
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询 html common.less index.less 方案2:flexible.js+rem 小插件小问题 ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
H5移动端rem布局还原750px设计稿方案。
引入对应的脚本: <!DOCTYPE html> <html> <head><meta charset="utf-8" />< ...
移动端自适应布局方案
文章目录 DPR rem布局实现机理优点缺点相关技术方案 viewport 布局优点缺点相关技术方案媒体查询+等比缩放原理 DPR DPR = 设备物理像素 / CSS像素 DPR = ...
移动端rem布局基本介绍及原理
rem布局 em和rem的认识在布局中,除了px之外,还有两个常见的单位,em和rem em: 相对于当前元素的字体大小→ 1em = 当前标签的font-size rem: 相对于根元素(html ...
移动端rem布局实例
逆战班学生记录: rem理解: em是一个相对单位,1em等于当前元素或父元素的font-size值 rem是指相对于根元素的字体大小的单位.简单的说它就是1个html标签的font-size大小. ...

移动端REM布局方案

把视觉稿中的px转换成rem

移动端REM布局方案相关推荐

最新文章

热门文章