zoukankan      html  css  js  c++  java
  • 响应式——em,rem,px

    进一步了解了em,rem,px

    PX像素,相对长度单位。像素px是相对于显示器屏幕分辨率而言的,在做Web页面时,我们都用px来设置文本,px比较稳定和精确,但是这种方法有一问题,就是当用户在浏览器中浏览我们做的Web网页时,它改变了浏览器的字体大小,这会使用我们的Web页面布局被打破。这时就可以用em来定义Web页面的字体。

    EM也是相对长度单位,相对于当前对象文本的字体尺寸,如果当前对文本的字体大小没有被设置,就相当于浏览器的默认字体尺寸。

    任意浏览器的默认字体高都是16px

    em需要一个参考值,一般都是以<body>的font-size为标准!使用em作为单位时,一定要知道父元素的设置,因为em就是一个相对值,而且是一个相对于父元素的值,真正的计算公式为:

    1%父元素的font-size*需要转换的像素值=em值

    rem是相对于根元素<html>,我们只需要一个根元素做参考值!

    /*-webkit-text-size-adjust:none;*/
    -webkit-text-size-adjust:100%;

    注释的部分是让chrome(谷歌)浏览器不会自动调整字体,但是会屏蔽chrome(谷歌)浏览器调整大小,就是使用鼠标滚轮将浏览器字体方法或缩小,但是在较高的谷歌浏览器中,做这个方法已经被废除了!

     

  • 相关阅读:
    windows常用快捷键
    【Linux】查看系统位数
    【Centos】yum 安装mariaDB
    【Centos7 GRUB】修改开机等待时间
    Shell脚本编写规范
    【Shell Basic】source . 与 bash sh 的区别
    linux防火墙之 ufw
    【HotSpot】jps命令行详解
    【Ubuntu 16】网络配置文件
    【刷题】BZOJ 2179 FFT快速傅立叶
  • 原文地址:https://www.cnblogs.com/watchmen/p/5031414.html
Copyright © 2011-2022 走看看