@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. CloudSim——云计算仿真软件概述

    CloudSim是由澳大利亚墨尔本大学的网格实验室和Gridbus项目宣布推出的云计算仿真软件. CloudSim是做什么的呢?可以简单理解为一个帮助研究.开发.测试的工具,如虚拟机资源分配算法.节能 ...

  2. 微信小程序-01-项目组成文件介绍(入门篇)

    自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚步或许会更有动力,我的 ...

  3. NoHttp封装--05 文件下载

    xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

  4. Scrum敏捷开发沉思录

    计算机科学的诞生,是世人为了用数字手段解决实际生活中的问题.随着时代的发展,技术的进步,人们对于现实世界中的问题理解越来越深刻,描述也越来越抽象,于是对计算机软件的需求也越来越高,越来越复杂,变化也越 ...

  5. 搭建iSCSI文件服务器故障转移群集

    故障转移群集(Failover Cluster)可以提供一个高可用性应用程序或服务的网络环境,本章将接受如何搭建iSCSI SAN文件服务器故障转移群集. 故障转移群集概述 我们可以将多台服务器组成一 ...

  6. SQL中的每一张表都必须设有主键吗

    问题描述: 公司的数据库表有时候会看到没有主键的,SQL中的每一张表都必须设有主键吗? 主键的作用: 1)保证实体的完整性: 2)加快数据库的操作速度: 3)在表中添加新记录时,数据库ACCESS会自 ...

  7. Emmet快速编写代码

    Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 ​ 给标签指定id选择器 di ...

  8. tidb集群某个节点报错之:node_exporter-9100.service failed

    今天启动集群tidb时出现一个错误,是某个tikv节点报错:node_exporter-9100.service  failed 一个节点的问题会导致整个集群启动失败.去此节点下的日志文件中查找,发现 ...

  9. 第 16 章 C 预处理器和 C 库(直角坐标转换极坐标)

    /*------------------------------------- rect_pol.c -- 把直角坐标转换为极坐标 ---------------------------------- ...

  10. hadoop系列 第二坑: hive hbase关联表问题

    关键词: hive创建表卡住了 创建hive和hbase关联表卡住了 其实针对这一问题在info级别的日志下是看出哪里有问题的(为什么只能在debug下才能看见呢,不太理解开发者的想法). 以调试模式 ...