怎样通过css的media属性，适配不同分辨率的终端设备?

最新推荐文章于 2024-03-20 16:42:15 发布

weixin_34346099

最新推荐文章于 2024-03-20 16:42:15 发布

阅读量190

点赞数

原文链接：https://yq.aliyun.com/articles/357572

版权

怎样通过css的media属性，适配不同分辨率的终端设备，示比例如以下:

<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
    @media (max-width:768px) {
        #div1 {
            width: 400px;
            margin: 0 auto;
            background:url('../img/1.JPG');
        }
        #img2,#img3 {
            width: 100px;
        }
    }
    @media (min-width:768px) {
        #div1 {
            width: 600px;
            margin: 0 auto;
            background:url('../img/1.JPG');
        }
        #img2,#img3 {
            width: 200px;
        }
    }
    @media (min-width:992px) {
       #div1 {
            width: 800px;
            margin: 0 auto;
            background:url('../img/1.JPG');
        }
        #img2,#img3 {
            width: 300px;
        }
    }

    @media (min-width:1200px) {
        #div1 {
            width: 1000px;
            margin: 0 auto;
            background:url('../img/1.JPG');
        }
        #img2,#img3 {
            width: 400px;
        }
    }
    </style>
  </head>
  <body>
    <div id="div1">
        <img id="img2" alt="img2" src="../img/2.JPG">
        <img id="img3" alt="img3" src="../img/3.JPG">
    </div>
  </body>
</html>

当然。也能够依据终端分辨率的变化去引用不同的css文件，示比例如以下:

<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" media="(max-width: 768px)" href="../css/max-768px.css">
    <link rel="stylesheet" media="(min-width: 768px)" href="../css/min-768px.css">
    <link rel="stylesheet" media="(min-width: 992px)" href="../css/min-992px.css">
    <link rel="stylesheet" media="(min-width: 1200px)" href="../css/min-1200px.css">
  </head>
  <body>
    <div id="div1">
        <img id="img2" alt="img2" src="../img/2.JPG">
        <img id="img3" alt="img3" src="../img/3.JPG">
    </div>
  </body>
</html>

注意: 仅仅须要将第一个文件中面的ccs写入四个css文件。

本文转自mfrbuaa博客园博客，原文链接：http://www.cnblogs.com/mfrbuaa/p/5206115.html，如需转载请自行联系原作者

weixin_34346099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎样通过css的media属性，适配不同分辨率的终端设备?

怎样通过css的media属性，适配不同分辨率的终端设备，示比例如以下:<!DOCTYPE html><html> <head> <title>首页</title> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫