rem布局在react中的应用
摘要:
前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化。
REM布局实例代码
var fontSizeInit = function() {
var doc = document.documentElement,
cli = doc.clientWidth;
cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+"px");
}
fontSizeInit();
window.addEventListener('resize', function() {
fontSizeInit();
});
sass:
$baseFontSize:16px !default;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
html {
font-size: $baseFontSize;
-ms-touch-action: none;
}
rem布局在react中的应用的更多相关文章
- rem布局加载闪烁问题
说明:以下内容来自CSDN,如有侵权,请立刻联系博主(我),我将删除该内容. 原文链接 https://blog.csdn.net/u013778905/article/details/779387 ...
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...
- 手机端页面自适应解决方案—rem布局
只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientation ...
- REM 布局
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- rem布局下使用背景图片和sprite图
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊 ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
随机推荐
- Unterminated <c:forEach tag
c:forEach tag意思是这一块有语法错误
- 支付宝集成遇到"_EVP_DecodeBlock",referenced from:报错
遇到问题报错如下: 调试了好多遍,始终不行,检测各种依赖库,发现并没有少什么.后来发现支付宝demo里比文档讲解里面多两个.a文件 直接加上就好了
- CocosCreator原生平台退出游戏,暂停和继续
原生平台退出游戏,方法为:cc.director.end();官方解释:End the life of director in the next frame暂停游戏,方法: cc.director.p ...
- mongodb副本集 statestr状态说明/解释
STARTUP:刚加入到复制集中,配置还未加载 STARTUP2:配置已加载完,初始化状态 RECOVERING:正在恢复,不适用读 ARBITER: 仲裁者 DOWN:节点不可到达 UNKNOWN: ...
- PID控制器(比例-积分-微分控制器)- IV
调节/测量放大电路电路图:PID控制电路图 如图是PlD控制电路,即比例(P).积分(I).微分(D)控制电路. A1构成的比例电路与环路增益有关,调节RP1,可使反相器的增益在0·5一∞范围内变化; ...
- 在Objective-C 中使用字符生成NSArray、NSDictionary、NSNumber
@符号不仅可以生成字符串,还可以生成其他数据类型如NSArray.NSDictionary和NSNumber,是一种简洁快速的用法. // NSArray array = [NSArray array ...
- Postgres空间地理类型POINT POLYGON实现附近的定位和电子围栏功能
目录 需求和背景 安装插件postgis 点POINT类型和距离 表添加POINT类型 添加空间索引 插入点 两个点之间的距离 附近5公里内的点 最近的10个点 面多边形'POLYGON' 添加字段类 ...
- winform的combox下拉框绑定数据源
List<Site> list = new List<Site>(); foreach (DataRow srcDr in srcDt.Rows) { list.Add(new ...
- 管理 Oracle Cluster Registry(OCR)
oracle的clusterware包含两个重要组件:OCR(包含本地组件OLR)和voting disks --OCR管理oracle clusterware和oracle rac数据库的配置信息 ...
- SharePoint Farm 3-Tier拓扑结构的实施解决方案
难得的假期,难得有时间来梳理知识. 我写过很多关于SharePoint的安装和配置,有利用PowerShell的,也有图形安装界面的. 也演示了怎样创建一个双层的SharePoint Farm,怎样利 ...