@media only screen and (width: 320px) {
html {
font-size: 16px;
}
}

@media only screen and (width: 360px) {
html {
font-size: 18px;
}
}

@media only screen and (width: 375px) {
html {
font-size: 18.75px;
}
}

@media only screen and (width: 400px) {
html {
font-size: 20px;
}
}

@media only screen and (width: 411px) {
html {
font-size: 20.55px;
}
}

@media only screen and (width: 414px) {
html {
font-size: 20.7px;
}
}

// 为了促证PC看上舒服而做一个特殊的处理
@media only screen and (min-width: 640px) {
html {
font-size: 32px;
}
}

手机端@media的屏幕适配的更多相关文章

  1. 手机端@media screen布局自适应

    @media only screen and (min-width: 310px) and (max-width: 360px) { }@media only screen and (min-widt ...

  2. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  3. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  4. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  5. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  6. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  7. @media响应式的屏幕适配

    当页面小于960px的时候执行 @media screen and (max-width: 960px){ body{ background: #000; } } 等于960px尺寸的代码 @medi ...

  8. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  9. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

随机推荐

  1. 【Java入门提高篇】Day24 Java容器类详解(七)HashMap源码分析(下)

    前两篇对HashMap这家伙的主要方法,主要算法做了一个详细的介绍,本篇主要介绍HashMap中默默无闻地工作着的集合们,包括KeySet,values,EntrySet,以及对应的迭代器:HashI ...

  2. JavaScript大杂烩6 - 理解JavaScript中的this

    在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this) ...

  3. 盐城 - 开设IT公司的好地方

    盐城:位于江苏省北部,这一好像只能算三线的城市,不久前当选为“国家中心城市”.在全国仅有的50城市中名列34.它可成为发展IT产业的好地方. (1)人才济济.从这里走出去的高级人才数不胜数,留在这里的 ...

  4. Spark性能优化(基于Spark 1.x)

    Task优化:    1.慢任务的性能优化:可以考虑减少每个Partition处理的数据量,同时建议开启spark.speculation(慢任务推导,当检测的慢任务时,会同步开启相同的新任务,谁先完 ...

  5. python第七十六天--堡垒机完成

    堡垒机windows ,linux 都通过测试初始化说明: #进入根目录 1.初始化表结构 #python3 bin/start.py syncdb 2.创建堡垒机用户 #python3 bin/st ...

  6. NPOI帮助类

    /// <summary> /// NPOI导出帮助类 /// </summary> public class NPOIHelper { /// <summary> ...

  7. SQLSERVER 死锁

    select request_session_id spid, OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tra ...

  8. windows任务管理器怎么知道多个IIS网站进程分别对应哪个网站

    摘要: 1.IIS网站对应的进程名一般叫w3wp.exe (windows2008系统为例,其他类似) 2.windows默认的任务管理器只能看到多个同名的进程名w3wp.exe,没法区别分别对应哪个 ...

  9. 解决wordpress上传文件出现http错误问题

    解决wordpress上传文件出现http错误问题 问题现象 今天上传约1.4m大小的gif文件到wordpress的媒体库时失败,提示http错误. 原因 由于之前一直上传图片都是可以的,所以推测最 ...

  10. Linux 小知识翻译 - 「路径设置」

    这次聊聊路径的使用,这里的路径是「命令搜索路径」的简称. 在Linux上执行命令的时候,本来是需要命令的所在位置的绝对路径的,就像「/usr/bin/passwd」这样. 但是,对于经常使用的命令,如 ...