设为首页收藏本站
开启辅助访问 切换到宽版

有戏

 找回密码
 立即注册
简历下载
搜索
热搜: 活动 交友 discuz
有戏»论坛 › 代码交流区 › 服务器代码交流 › 如何通过css的media属性，适配不同分辨率的终端设备? ...
返回列表 发新帖
查看: 619|回复: 0

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

[复制链接]
admin

2

主题

2

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14390
发表于 2016-4-28 18:20:01 | 显示全部楼层 |阅读模式
如何通过css的media属性，适配不同分辨率的终端设备，示例如下:

  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>首页</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  8.     <meta http-equiv="description" content="this is my page">
  9.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  10.     <style>
  11.     @media (max-width:768px) {
  12.         #div1 {
  13.             width: 400px;
  14.             margin: 0 auto;
  15.             background:url(‘../img/1.JPG‘);
  16.         }
  17.         #img2,#img3 {
  18.             width: 100px;
  19.         }
  20.     }
  21.     @media (min-width:768px) {
  22.         #div1 {
  23.             width: 600px;
  24.             margin: 0 auto;
  25.             background:url(‘../img/1.JPG‘);
  26.         }
  27.         #img2,#img3 {
  28.             width: 200px;
  29.         }
  30.     }
  31.     @media (min-width:992px) {
  32.        #div1 {
  33.             width: 800px;
  34.             margin: 0 auto;
  35.             background:url(‘../img/1.JPG‘);
  36.         }
  37.         #img2,#img3 {
  38.             width: 300px;
  39.         }
  40.     }

  42.     @media (min-width:1200px) {
  43.         #div1 {
  44.             width: 1000px;
  45.             margin: 0 auto;
  46.             background:url(‘../img/1.JPG‘);
  47.         }
  48.         #img2,#img3 {
  49.             width: 400px;
  50.         }
  51.     }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <div id="div1">
  56.         <img id="img2" alt="img2" src="../img/2.JPG">
  57.         <img id="img3" alt="img3" src="../img/3.JPG">
  58.     </div>
  59.   </body>
  60. </html>
复制代码
当然，也可以根据终端分辨率的变化去引用不同的css文件，示例如下:

  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>首页</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  8.     <meta http-equiv="description" content="this is my page">
  9.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  10.     <link rel="stylesheet" media="(max-width: 768px)" href="../css/max-768px.css">
  11.     <link rel="stylesheet" media="(min-width: 768px)" href="../css/min-768px.css">
  12.     <link rel="stylesheet" media="(min-width: 992px)" href="../css/min-992px.css">
  13.     <link rel="stylesheet" media="(min-width: 1200px)" href="../css/min-1200px.css">
  14.   </head>
  15.   <body>
  16.     <div id="div1">
  17.         <img id="img2" alt="img2" src="../img/2.JPG">
  18.         <img id="img3" alt="img3" src="../img/3.JPG">
  19.     </div>
  20.   </body>
  21. </html>
复制代码
注意: 只需要将第一个文件里面的ccs写入四个css文件。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|有戏 粤ICP备2020111303号

GMT+8, 2025-12-6 13:41 , Processed in 0.077542 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表