@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. 聊聊HTTP gzip压缩与常见的Android网络框架

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/5835990.html 进入主题之前,我们先来看一下客户端与服 ...

  2. android recovery 升级之USB设备挂载

    Recovery升级过程,通常会从两个地方获取升级包update.zip升级,一般在线升级,会把升级包下载到cache分区,本地升级会从usb或者tf卡中升级.本文讨论下,本地USB升级时,无法挂载U ...

  3. Apache与Tomcat有什么关系和区别

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  4. 数据库_存储过程简介(oracle版)

    应朋友要求,写个存储过程说明,本篇比较简单,适合新接触存储过程的同学 先来个简单的 begin dbms_output.put_line('my first execute'); end; 如果使用的 ...

  5. Spring MVC 的工作原理

    引自:https://www.cnblogs.com/xiaoxi/p/6164383.html SpringMVC的工作原理图: SpringMVC流程 1.  用户发送请求至前端控制器Dispat ...

  6. [SequenceFile_4] SequenceFile 配置压缩

    0. 说明 SequenceFile 配置压缩编解码器 && 压缩类型的选型 1. SequenceFile 配置压缩编解码器 package hadoop.compression; ...

  7. ArcGIS栅格影像怎么从WGS84地理坐标转成Xian80投影坐标

    事情是这样的,我下载了一个WGS84坐标系的影像图,需要加载到Xian80投影坐标系下,所以需要对影像图进行坐标系的转换 1.因为涉及到两个参考椭球的问题,首先需要计算七参数,如何计算七参数,请参考我 ...

  8. attachBaseContext

    at android.content.ContextWrapper.attachBaseContext(ContextWrapper.java:66) at android.view.ContextT ...

  9. android:layout_margin真实含义 及 自己定义复合控件 layout()运行无效的问题解决

    一.关于layout_margin 搞Android时间也不短了.对layout_margin也不陌生了,可近期遇到一个问题让我发现,对它的认识还不够深入全面.大量网络资料上都说,layout_mar ...

  10. 【洛谷】【二分查找】P1102 A−B数对

    [题目描述:] 给出一串数以及一个数字 C ,要求计算出所有 A−B=C 的数对的个数.(不同位置的数字一样的数对算不同的数对) [输入格式:] 第一行包括 2 个非负整数 N 和 C ,中间用空格隔 ...