对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
对于需要适配各种移动设备,使用rem,例如只需要适配iphone和iPad等分辨率差别比较挺大的设备

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

作者:smile.轉角

QQ:493177502

【移动端】移动端字体单位font-size选择px还是rem的更多相关文章

  1. 移动端如何定义字体font-family

    移动端如何定义字体font-family 中文字体使用系统默认即可,英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考<移 ...

  2. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  3. fontresize 移动端的手机字体 大小设置

    这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...

  4. CSS 天坑 I - 字体单位

    首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不 ...

  5. css 字体单位之间的区分以及字体响应式实现

    问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px  = 1/16 e ...

  6. 详解APM数据采样与端到端

    高驰涛 云智慧首席架构师 据云智慧统计,APM从客户端采集的性能数据可能占到业务数据的50%,而企业要做到从Request到Response整个链路中涉及到的所有数据的准确采集,并进行有效串接,进而实 ...

  7. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  8. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  9. Android ListView分页载入(服务端+android端)Demo

    Android ListView分页载入功能 在实际开发中经经常使用到,是每一个开发人员必须掌握的内容,本Demo给出了服务端+Android端的两者的代码,并成功通过了測试. 服务端使用MyEcli ...

随机推荐

  1. CSS背景和CSS列表

    ------------------------------ div{            background: red;            width: 300px;            ...

  2. 关于RecyclerView你知道的不知道的都在这了(下)

    目录 目录 正文 6. Recycler 7. ItemAnimator 8. ItemDecoration 9. OnFlingListener 目录 由于本篇篇幅特长,特意做了个目录,让大伙对本篇 ...

  3. JS之表单提交时编码类型enctype详解

    简介 form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x- ...

  4. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  5. Ios12怎么投屏到电脑 苹果手机投屏电脑的方法

    苹果手机是一款外观精致时尚的手机,吸引这许多用户争先恐后的购买,然后苹果手机的系统不同于我们传统使用的安卓系统,它采用的是苹果自主研发的IOS系统,有许多操作与安卓手机不同,那么苹果手机怎么用呢?下面 ...

  6. 解决ie6中png图片格式不兼容问题

    在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...

  7. Python基于Python实现批量上传文件或目录到不同的Linux服务器

    基于Python实现批量上传文件或目录到不同的Linux服务器   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...

  8. power designer的安装

    PowerDesigner的安装 原由:新学期要开概要设计(软件设计与体系结构)这门课,老师推荐了两个CASE工具. Rational Rose Power Designer 本来想找rose的资源, ...

  9. 用C++对C++语法格式进行分析

    前言 最近C++项目需要用到脚本,这就关系到如何绑定对象到脚本运行环境.因使用到多套脚本语言,所以现有的绑定技术,都不能满足需求.所以只能寻求解析C++的头文件,再根据描述进行绑定.起初发现boost ...

  10. jQuery如何判断input元素是否获得焦点(点击编辑时)

    问题提出 如果你要判断input元素是否获得焦点,或者是否处在活动编辑状态,使用jQuery的 hasFocus() 方法或 is(':focus') 方法貌似都无效!搜索网上给出的办法,几乎净是采用 ...