动态rem

作者: 马建阳 | 来源:发表于2018-03-03 12:03 被阅读21次

下面是对动态rem的总结。
如何做:

  1. 浏览器禁止 980 像素的缩放
  2. 设置 html {font-size: 页面宽度 / 10 px}
  3. 10 rem == 页面宽度(1rem 等于1/10的页面宽度)
  4. 所有单位都用 rem == 所有长度都以页面宽度为基准
  5. 页面可以兼容任何手机屏幕

例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script>
  document.write(`
<style>
  html{font-size:${document.documentElement.clientWidth/10}px;}
</style>`)
</script>
  <title>JS Bin</title>
</head>

<body>
  <ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
    <li>导航4</li>
  </ul>
<img src="https://i.loli.net/2018/03/03/5a9a1cd1c7718.jpg" alt="">
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
pl {
  list-style: none;
}
ul {
  display: flex;
}
body {
  font-size: 0.4rem;
}
li {
  border: 1px solid;
  width: 2.5rem;
  line-height: 1.25rem;
  text-align: center;
}
img {
  width: 4rem;
  height: 5rem;
}

效果:


上述实例具体细节:
http://js.jirengu.com/yidur/4/edit
变化大小后点击右上方run with js 运行会改变大小。

相关文章

  • 动态REM

    rem 这个单位代表根元素的 font-size 大小(例如 元素的font-size)。 rem 与 em ...

  • 动态REM

    什么是rem? rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 ) rem和e...

  • 动态rem

    响应式 1.meta:vp阻止缩放 width=device-width记住viewport是视口user-sca...

  • 动态REM

    REM = (fontsizeoftherootelement)根元素的font-size 页面中font-siz...

  • 动态REM

    常见单位 px : 固定单位 百分比 em: 相对单位,相对于自己的 font-size。如果用在 font-si...

  • 动态REM

    1. 什么是 REM? 根节点(html)的font-size(默认font-size是16px).若设置htm...

  • 动态REM

    一些长度单位网页默认font-size为16px chrome默认最小字号为12pxpx 像素 pt(没人用)em...

  • 动态rem

    下面是对动态rem的总结。如何做: 浏览器禁止 980 像素的缩放 设置 html {font-size: 页面宽...

  • 动态REM

    响应式 1.meta:vp 阻止缩放 2.尽量不要写width / height,改用max / min 不要把宽...

  • 动态rem

网友评论

      本文标题:动态rem

      本文链接:https://www.haomeiwen.com/subject/jnjtfftx.html