移动端设置html的字体尺寸,移动端开发元素及字体尺寸适配基础知识
刚看了一篇真正教会你开发移动端页面的文章(二),文章写的很清楚,现总结下他的核心思想及自己所查阅的一些资料:
假设设计稿是iPhone6(iPhone6设备像素为750px;设备像素比为2,即其适口尺寸为375px)上有200px的方块box:
一、关于普通元素尺寸:
(一)、box的大小无论在什么设备下大小都是固定的
body{ margin: 0; padding: 0;
} .box{ width: 200px; height: 200px; background: red;
}
var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
(二)、box的大小随着屏幕的宽度大小变化而按比例变化(方法一)
body{ margin: 0; padding: 0;
} .box{ width: 2.6666667rem;
/* 200 (box设计的宽度) / 75(设备像素宽度的十分之一)= 2.6666667 */
height: 2.66666667rem; background: red;
}
var scale = 1 / window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
注:document.documentElement.clientWidth 为布局视口尺寸,iPhone5为320px,iPhone6为375px;
当然如果设计稿是iPhone5(设计稿的宽度为640px),则1rem 为64px,那么box宽高应该为200/64=3.125rem
这种方法我们可以看到需要一些换算过程,也许你会觉得繁琐,其实不然,我们可以借助less来完成,例如:// 例如: .px2rem(height, 200);.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
因此,对于200px 的宽高,我们可以这样写:.px2rem(width, 200);.px2rem(height, 200);
在iPhone6下 HTML就会转换成.px2rem(width, 2.6666667 rem);.px2rem(height, 2.6666667 rem);
因此不需要我们自己亲自计算。
(三)、box的大小随着屏幕的宽度大小变化而按比例变化(方法二)
对于iPhone6的设计稿来说(设计稿总宽度尺寸为750px),先设置html的font-size为100px;(也就是1rem),这样总宽度为7.5rem,我们就以页面总宽7.5rem为基准,对于iPhone6的适口宽度(375px)来说,我们可以设置font-size为375/7.5=50px;对于iPhone5的适口宽度(320px)来说,我们可以设置font-size为320/7.5=42.6666667px;也就是document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
因此对于设计稿中的200px宽高,我们直接使用200px/100px=2 也就是2rem即可,无论在什么设备下,都会等比例缩放;
body{ margin: 0; padding: 0;
} .box{ width: 2rem; height: 2rem; background: red;
}
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
当然,这是对于iPhone6的设计稿来说的,如果对于iPhone5的设计稿(总宽为640px),我们可以同样采用先设置html的font-size为100px,这样总宽度为6.4rem,200px的box则为2rem, 对于iPhone5的适口宽度来说,我们可以设置font-size为320px/6.4=50px(200px的box还是为2rem即100px);
对于iPhone6的适口宽度来说,我们可以设置font-size为375/6.4=58.59375px(200px的box还是为2rem即117.1875px);
因此可将上面的代码中的document.documentElement.style.fontSize部分改为
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; 即可;
相关文章: 动态rem简单示例
相关插件:gulp-postcss、postcss-pxtorem 、gulp-posthtml、posthtml-postcss、postcss-pxtorem
二、关于字体尺寸
对于字体,不建议使用rem单位而是采用媒体查询;
例如:@media screen and (max-width: 321px) { body { font-size:16px
}
}
@media screen and (min-width: 321px) and (max-width:400px) { body { font-size:17px
}
}
@media screen and (min-width: 400px) { body { font-size:19px
}
}
作者:该帐号已被查封
链接:https://www.jianshu.com/p/dffa036d7595
移动端设置html的字体尺寸,移动端开发元素及字体尺寸适配基础知识相关推荐
- aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画:代码详解和基础知识复习
1 效果: 2 知识点: ======= 2.1 html的基础知识. 2.2 css3的基础知识. 2.3 vue的基础知识. 2.4 代码讲解非常清楚,小白看了都会. 3 html骨架: ==== ...
- 前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之处,万望告知. 前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使 ...
- Markdown设置字体大小、颜色...,CSDN博客编写设置字体大小、颜色、粗细。字体,文字背景设置。
正常我们写的文字默认是3号尺寸,但是字数多的话要想更美观设置小号字体更棒呢! 小号字体 字体颜色 大号-字体 hello Boy! 华文细黑字体 字体加粗 字体标记 绿色背景 设置方法如图所示: 喜欢 ...
- 移动端html尺寸,移动端页面的三种尺寸
对于移动端页面来说,所有尺寸都应该明确的归为三类: 逻辑像素尺寸 相对尺寸 1 物理像素尺寸 以示范页面为例,在不同尺寸下希望效果如下 标题一直按照如图所示铺满三行「相对尺寸」 标题下方的分割线上下 ...
- pc端ui图片尺寸_PC端UI设计尺寸规范?
对于刚入行的UI设计师,最容易犯的错就是在设计移动APP时,不懂什么尺寸或者用哪种屏幕的尺寸是最适当的?为了解决这个问题,今天我们就简单的为大家整理做UI时最基础的尺寸规范. 现象 首先说现象,大家都 ...
- 移动端h5不支持font-family里面的微软雅黑等等字体
首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体:微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布,是Windows Vista默认字体.意思就是wind ...
- HUB管理步骤、桥端设置步骤和客户端使用步骤
HUB管理步骤.桥端设置步骤和客户端使用步骤 (一)远程管理虚拟HUB和创建用户的步骤 (二)建立本地桥及级联的步骤 (三)客户端的配置步骤 (四)指定客户端IP进行访问的配置步骤 (一)远程管理虚拟 ...
- PyCharm编程环境的中英文字体分别设置的好处多----一石三鸟地解决中文字体不一致、英文字体不涵盖中文字符、编程字体实用性兼顾美观性的三个问题
在编程环境(例如Python的PyCharm)中,我们希望编程环境的字体具有如下特性: (1)字体覆盖中文和英文字符. (2)等宽字体,并且是TrueType字体,方便辨识代码中缩进和对齐的字符个数. ...
最新文章
- 170多万篇论文,存储量达1.1 TB,Kaggle上线arXiv完整数据集
- 卷及神经网络CNN for image retrieval
- oracle函数 trunc(x[,y])
- mfc程序转化为qt_以“企鹅电竞小程序”改版为例,讲解如何将用户核心路径转化为设计语言...
- Elasticsearch集成ik分词器
- 如何批量在文件夹中建立php,怎么批量创建文件夹_一次性创建多个文件夹方法_一聚教程网...
- python set集合_Python字典(dict)和集合(set)
- SAP License:物料类型的划分标准
- ios支付 选择货币_iOS开发中金钱货币的计算问题
- Java面试题详解一:面向对象三大特性
- Mysql中autocommit的用法
- tar和其他一些压缩解压工具
- 编写一个应用程序,给出汉字“你”“我”“他”在Unicode表中的位置。
- LDA模型训练与得到文本主题、困惑度计算(含可运行案例)
- 找不到主类或无法加载主类
- es 按条件查询数据总条数
- html5中span作用,span标签的作用与用法总结
- java 货币格式 转换_Java 转换货币形式
- 利用微软Text-To-Speech朗读文本
- WGS(重测序)分析详解与脚本
热门文章
- tdd 单元测试_何时给定在单元测试和TDD中的重要性
- activiti脚本任务_Activiti中的安全脚本如何工作
- threejs 影子属性_影子场vs.属性访问器接口第2轮
- drill apache_Apache Drill 1.4性能增强的简要概述
- c++返回指针时候注意提防_提防Java中的函数式编程!
- java batch_Java EE 7 Batch中传递属性/参数的2种方式
- 使用Apache JMeter负载测试Web应用程序
- apache camel_探索Apache Camel Core –文件组件
- Spring Cloud Gateway –配置简单路由
- jee过滤器应用场景_将涡轮增压器添加到JEE Apps