如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然后基本上给我的就是
html{font-size:62.5%}
body{font-size:1.2rem}
移动端不同屏幕显示的字体大小是有区别的,所以现在我都是配着以下js使用匹配不同的移动端设备屏幕。
function page() {
//通过navigator判断是否是移动设备
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
//在移动端
(function (doc, win) {
// html
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
clientWidth = (clientWidth > 768 ) ? 768 : clientWidth ; docEl.style.fontSize = 10 * (clientWidth / 375 ) + 'px'; //这个10可以根据自己使用的数据来调整
};
if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
//移动端 文字适配
}
else { //如果是pc端我们可以像微信公众号那样,设置最大宽度为740px
// window.location.href="prompt.html"
document.documentElement.style.maxWidth=740+'px';
document.documentElement.style.margin="0 auto"
//PC端
}}
page();
使用时建议单独建一个js包,要用直接引用就行,引入上面 的js代码后(注意:将js包在页面加载前边引入),字体和高度使用rem作为单位,宽带设为百分比,项目在不同的移动端设备就会自动适应屏幕啦
如何利用rem在移动端不同设备上让字体自适应大小的更多相关文章
- 利用rem解决移动端响应适配问题
最近看了<从网易与淘宝的font-size思考前端设计稿与工作流>和github上的<使用Flexible实现手淘H5页面的终端适配> 以前一直用百分比的我,对移动前端的H5页 ...
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 用rem适配移动端
常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 本周汇总 动态rem适配移动端/块状元素居中/透明度
1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...
- rem实现移动端自适应页面
一.把px转换成rem方案 1.cssrem插件 2.css预处理器 3.rem-unit插件 4.px2rem插件 rem就是相对于根元素的font-size来做计算,设置好根结点字体大小,子节点用 ...
- 小程序 青少儿书画 利用engineercms作为服务端
因为很多妈咪们喜欢发布自己宝宝的作品,享受哪些美好时刻,记录亲子创作过程. 为了方便妈咪们展示亲子创作,比如宝宝们画作,涂鸦,书法,作文,其他才艺,特利用engineercms作为服务端,重新设计了一 ...
随机推荐
- Gc.Db之循序渐进
距离上次写Gc.Db框架已经有一段时间了,最近默默对框架代码已经做了不少优化和功能,且已经提交至nuget,大家如果想使用此框架,可以通过nuget搜索:Gc.Db进行下载和安装包. 本篇文章主要是介 ...
- Code Conventions for the Java
Oracel官方JAVA编码规范指引 http://www.oracle.com/technetwork/java/codeconvtoc-136057.html
- ActiveMQ入门
ActiveMQ简介 概要 开源 JMS-compliant 消息中间件message-oriented middleware(MOM) 松耦合,相对于RPC的紧耦合 发送消息fire-and-for ...
- Asp.net MVC的ViewData与ViewBag以及TemplateData的使用与区别
ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP.NET MVC3 才有 基于Asp.net 3.5 fram ...
- pycharm5注册码
43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- 初学Vue2.0--基础篇
概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...
- MVC POST在ACTION上进行多个模型的数据绑定
首先声明,接下来的东西并不符合本人认同的严谨的MVC模式. 用MVC做项目的过程中,越来越多的用到不严谨的MVC编程. 比如,在"cshtml"文件中写: @Html.Raw(DB ...
- Web API系列(三)统一异常处理
前面讲了webapi的安全验证和参数安全,不清楚的朋友,可以看看前面的文章,<Web API系列(二)接口安全和参数校验>,本文主要介绍Web API异常结果的处理.作为内部或者是对外提供 ...
- Bubble Cup 8 finals C. Party (575C)
题意: 给定n个人,分两天晚上去夜总会开派对,要求每天恰好有n/2个人去,且每人去的夜总会各不相同. 每个人对不同的晚上不同的夜总会有不同的满意度,求一个方案使得所有人的满意度之和最大. 夜总会数量= ...
- 《JavaScript高级程序设计(第3版)》笔记-第1章-JavaScript 简介
PS:第一章内容实在不多,就把前些日子看过的记录整理了一下,先发上来. 1.1 JavaScript 简史 1.JavaScript诞生前期目的主要是为了处理这种简单的表单验证. 1.2 JavaSc ...