响应式布局 css3 media 媒体查询和js+rem

最新推荐文章于 2023-06-06 00:28:06 发布

sly94

最新推荐文章于 2023-06-06 00:28:06 发布

阅读量5.2k

点赞数 1

本文链接：https://blog.csdn.net/sly94/article/details/52982018

版权

一：媒体查询

1.使用media的时候需要先设置<meta>标签来兼容移动设备的展示。

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">

width=device-width :宽度等于当前设备的宽度

user-scalable=no：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

initial-scale=1：初始的缩放比例（默认设置为1.0）

minimum-scale=1：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale=1：允许用户缩放到的最大比例（默认设置为1.0）

2.css3 media

body{
background-color: lightgreen;
}
@media screen and (max-width:960px){
body{
background-color: lightblue;
}
}

一般页面都会写media，意思：当页面小于960px的时候执行它下面的css。

3.媒体查询缺点

需要根据移动设备的屏幕大小去写，一般宽度在（300px-760px）之间。如：min-width max-width在多少之间显示成什么样。

这样会为了适应各种屏幕，写很多css样式代码

二：js+rem

通过js 获取屏幕宽度，重新计算html设置的字体大小，rem是相对html 根元素计算大小的。

<!DOCTYPE html>
<html>
<head>
  <base href="<%=basePath%>" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no" />
  <title>在线服务</title>
  <link rel="stylesheet" type="text/css" href="/webchat/views/css/guide.css"/>
</head>
<script type="text/javascript">
  !function (a) {
    function b() {
      var b = g.getBoundingClientRect().width;
      b / c > 640 && (b = 640 * c), a.rem = b / 16, g.style.fontSize = a.rem + "px"
    }

    var c, d, e, f = a.document, g = f.documentElement, h = f.querySelector('meta[name="viewport"]'), i = f.querySelector('meta[name="flexible"]');
    if (h) {
      console.warn("将根据已有的meta标签来设置缩放比例");
      var j = h.getAttribute("content").match(/initial-scale=(["']?)([d.]+)1?/);
      j && (d = parseFloat(j[2]), c = parseInt(1 / d))
    } else if (i) {
      var j = i.getAttribute("content").match(/initial-dpr=(["']?)([d.]+)1?/);
      j && (c = parseFloat(j[2]), d = parseFloat((1 / c).toFixed(2)))
    }
    if (!c && !d) {
      var k = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), c = a.devicePixelRatio;
      c = k ? c >= 3 ? 3 : c >= 2 ? 2 : 1 : 1, d = 1 / c
    }
    if (g.setAttribute("data-dpr", c), !h)if (h = f.createElement("meta"), h.setAttribute("name", "viewport"), h.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no"), g.firstElementChild)g.firstElementChild.appendChild(h); else {
      var l = f.createElement("div");
      l.appendChild(h), f.write(l.innerHTML)
    }
    a.dpr = c, a.addEventListener("resize", function () {
      clearTimeout(e), e = setTimeout(b, 300)
    }, !1), a.addEventListener("pageshow", function (a) {
      a.persisted && (clearTimeout(e), e = setTimeout(b, 300))
    }, !1), "complete" === f.readyState ? f.body.style.fontSize = 12 * c + "px" : f.addEventListener("DOMContentLoaded", function () {
      f.body.style.fontSize = 12 * c + "px"
    }, !1), b()
  }(window);

</script>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>
<body id="guideApp" v-cloak>

</body>

</html>

sly94

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
响应式布局 css3 media 媒体查询和js+rem

一：媒体查询1.使用media的时候需要先设置标签来兼容移动设备的展示。metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1"> width=device-width :宽度等于当前设备的宽度use
复制链接

扫一扫