zoukankan      html  css  js  c++  java
  • px,rem,em 通过媒体查询统一的代码

    @media only screen and (max- 1080px), only screen and (max-device-1080px) {
     html,body {
     font-size:16.875px;
     }
     }
     @media only screen and (max- 960px), only screen and (max-device-960px) {
     html,body {
     font-size:15px;
     }
     }
     @media only screen and (max- 800px), only screen and (max-device-800px) {
     html,body {
     font-size:12.5px;
     }
     }
     @media only screen and (max- 720px), only screen and (max-device-720px) {
     html,body {
     font-size:11.25px;
     }
     }
     @media only screen and (max- 640px), only screen and (max-device-640px) {
     html,body {
     font-size:10px;
     }
     }
     @media only screen and (max- 600px), only screen and (max-device-600px) {
     html,body {
     font-size:9.375px;
     }
     }
     @media only screen and (max- 540px), only screen and (max-device-540px) {
     html,body {
     font-size:8.4375px;
     }
     }
     @media only screen and (max- 480px), only screen and (max-device-480px) {
     html,body {
     font-size:7.5px;
     }
     }
     @media only screen and (max- 414px), only screen and (max-device-414px) {
     html,body {
     font-size:6.46875px;
     }
     }
     @media only screen and (max- 400px), only screen and (max-device-400px) {
     html,body {
     font-size:6.25px;
     }
     }
     @media only screen and (max- 375px), only screen and (max-device-375px) {
     html,body {
     font-size:5.859375px;
     }
     }
     @media only screen and (max- 360px), only screen and (max-device-360px) {
     html,body {
     font-size:5.625px;
     }
     }
     @media only screen and (max- 320px), only screen and (max-device-320px) {
     html,body {
     font-size:5px;
     }
     }
     @media only screen and (max- 240px), only screen and (max-device-240px) {
     html,body {
     font-size:3.75px;
     }
    先抛出一个问题:为什么要选择rem?

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。

    em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。

    rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。

    以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。

  • 相关阅读:
    小小不爽一下
    银行家算法的讨论
    【转】C字符串处理函数的实现
    Oracle物理存储结构文件
    RAC和ASM环境下修改控制文件control file
    TNS01190: The user is not authorized to execute the requested listener comm (oracle”用户没有启动lisener的权限?)
    RAC环境ASM存储新增控制文件的方法
    Oracle RAC 修改 spfile 文件位置
    Rman通过duplicate创建standby
    rman恢复手册
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/8495330.html
Copyright © 2011-2022 走看看