您的位置：首页 > Web前端 > CSS

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

2015-06-29 19:32 645 查看

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

[code]<!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文件，示例如下:

[code]<!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文件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航