@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. Salesforce的Developer Console简介

    Developer Console是Salesforce提供的一个基于浏览器的集成开发环境.在Developer Console中,开发者可以新建.修改各种Apex.Visualforce.Light ...

  2. VXLAN技术在数据中心的应用

    1.VXLAN技术可以通过物理交换机实现,也可以通过服务器实现,这两种实现的后台反应的是CT技术,还是IT技术来主导数据中心虚拟网络的发展. 2.物理交换机实现的VXLAN受限于芯片支持的规则,一般情 ...

  3. 排错-安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法

    安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法 by:授客 QQ:1033553122 在Windows Server 2008安装SQL Server 2008出现的问 ...

  4. 安卓开发_深入理解Activity和Fragment的关系

    Fragment(碎片)是必须嵌入在 Activity(活动) 中使用的.Fragment的生命周期随着Activity的生命周期的变化而变化 一.首先让我们看下Activity和Fragment的生 ...

  5. SQL Server 2012 读写分离设置 - AlsoIn

    原文转至:http://www.tuicool.com/articles/a6rmiam/ 引用: http://technet.microsoft.com/zh-cn/library/jj16176 ...

  6. SQLSERVER 死锁

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

  7. React路由 + 绝对路径引用

    路由: 哈希路由(在url地址后加   #name) // 实现页面监听 window.onhashchange = function(){ console.log(‘hash:’,window.lo ...

  8. Java设计模式之一 ----- 单例模式

    什么是单例模式 保证一个系统中的某个类只有一个实例而且该实例易于外界访问.例如Windows界面的任务管理器就可以看做是一个单例. 单例模式的使用场景 需要频繁的进行创建和销毁的对象: 创建对象时耗时 ...

  9. 求助pycharm里import pandas遇到No module named pandas怎么办

    目测是安转pandas库之后pycharm对库的检索没有更新.(能理解意思就行,我也是小白,不会专业术语,刚巧我也遇到了这样的问题所以来回答)我当时解决这个问题也算是瞎猫遇见死耗子. &amp ...

  10. kuangbin fire搜索bfs

    Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of the ma ...