• rem实现自适应


    总结一下,rem实现自适应:用rem代替px,配合媒体查询设置font-size:n%。

    首先,px是死的。若一律用px,那就会大的显得小,小的屏幕显得大。其次,rem是活的,通过设置字体大小可以引起rem的改变,为什么?

    因为rem和px有一个对应关系,因为对应关系是固定的比例,这个比例一旦确定下来,整个页面的rem与px对应关系都确定,举个栗子:默认1rem对应16px,5rem对应80px,对应关系是1:16,设置html元素的根字体的大小是n,这个比例就是1:n(验证效果:默认样式下设置两个<p></p>,font-size一个10px,一个1rem,会发现两行字不一样大小),其实这个不太利于口算,但是如果我们把它变成1:10那就不错,就利于口算了。一般来说 ,浏览器默认字体大小是16px,设置font-size:62.5%后就有1rem = 10px,于是就利于计算了,做布局就按照这个来方便计算。

    另外,选定一个常用屏宽媒体查询设置font-size:62.5%,用来开发布局,其他屏宽媒体查询去设置不同的font-size

    为什么不直接设置font-size:10px?

    chrome显示时,字体大于等于12px,若你设置的字体小于12px,则显示为12px,Safari应该是可以显示小于12px的字体大小;因此,只能用百分比去设置,否则就直接设置10px就好

  • 相关阅读:
    【NOIP2018】游记
    题解 P1441 【砝码称重】
    题解 P3128 【[USACO15DEC]最大流Max Flow】
    题解 P1949 【聪明的打字员_NOI导刊2011提高(10)】
    题解 P1966 【火柴排队】
    题解 P1895 【数字序列】
    topcoder做题
    1149E
    hdu 6589
    hdu 6579
  • 原文地址:https://www.cnblogs.com/ww01/p/9753713.html
Copyright © 2020-2023  润新知