怎样通过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文件。

怎样通过css的media属性，适配不同分辨率的终端设备?的更多相关文章

  1. 让IE6、7、8兼容@media属性

    通常做页面适配的时候,经常会用到@media属性,对不同屏幕范围内的元素设置不同的样式.但是@media属性不兼容IE8及IE8以下的浏览器 解决方法: 直接在页面中引入respond.src.js即 ...

  2. CSS 之 @media

    @media 版本:CSS2 兼容性:IE5+ 语法: @media  sMedia  {sRules} 取值: sMedia : 指定设备名称.请参阅设备类型 all, aural, braille ...

  3. media属性

    media=“screen”是什么意思?? media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的. 该属性用于规定目标 URL 是为特殊设备(比如 iPhone).语音或打印媒介设计的 ...

  4. 怎样使用 css 的@media print控制打印

    怎样使用 css 的@media print控制打印? <HTML> <HEAD> <TITLE> New Document </TITLE> < ...

  5. javascript总结45: HTML DOM media 属性

    定义和用法 media 属性设置或返回显示文档的设备. 对于样式信息而言,目标媒介非常重要.移动设备和桌面计算机的样式可能是不同的. 实例 <html> <head> < ...

  6. html：<link> 标签中的 media 属性

    HTML <link> 标签的 media 属性 定义和用法 media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. media属性值 ( ...

  7. link标签的media属性的用法

    <link rel=stylesheet" type="text/css" href="print.css" media="scree ...

  8. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  9. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

随机推荐

  1. debian install & configure(2)-drivers-ati

    依赖apt-get install build-essential cdbs fakeroot dh-make debhelper debconf libstdc++6 dkms libqtgui4 ...

  2. CC++初学者编程教程(10) 搭建Android java C/C++ NDK QTforAndroid 开发环境

    1 安装JDK 2 点下一步 3 点下一步 4 开始安装 5 定制路径,点下一步 6 开始安装 7 安装完成, 8 解压缩 9 启动eclipse 10 看到启动画面 11 设置工作文件夹 12 单击 ...

  3. 在win7下php查询数据库, 连接被重置

    解决方法一 将 php5 目录下的libmysql.dll拷贝至 windows/system32和apache/bin下 解决方法二 在apache/conf/httpd.conf文件中添加 Loa ...

  4. MySQL Troubleshoting：Waiting on query cache mutex

    今天被MySQL Query Cache 炕了.线上大量 Waiting on query cache mutex 那么什么是 Query Cache? QC 缓存的是整个SELECT的结果集.而非执 ...

  5. ASP.NET MVC 学习之路-2

    本文在于巩固基础 为了方便理解MVC框架,我们先创建空的ASP.NET MVC模板 下面是创建后的项目结构 每个文件或者文件夹的作用 App_Data 应用程序数据--- 顾名思义是放置文件或者数据库 ...

  6. AngularJs(七) 模块的创建

    module 目前我选编写的都是在AngularJs-1.5版本,如有疑问可以联系我. 理解模块的生命周期. config 和 run 方法是模块调用时加载的方法.那么module的执行顺序是怎么样呢 ...

  7. 经典：十步完全理解 SQL

    经典:十步完全理解 SQL   来源:伯乐在线 链接:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完 ...

  8. Spring AOP那些学术概念—通知、增强处理连接点（JoinPoint)切面（Aspect）

    1.我所知道的AOP 初看起来,上来就是一大堆的术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等.一下让你不知所措,心想着:管不得很多人都和我说AOP多难多难.当我看进去以后, ...

  9. QT正则表达式

    QT正则表达式有一个问题,当初始状态是不符合正则表达式时,能够输入任意字符,若在输入过程中符合正则表达式,马上进入字符检测状态,即只能接受符合正则表达式的字符.

  10. Git 系列（四）：在 Git 中进行版本回退

    在这篇文章中,你将学到如何查看项目中的历史版本,如何进行版本回退,以及如何创建 Git 分支以便你可以大胆尝试而不会出现问题. 在你的 Git 项目的历史中,你的位置就像是摇滚专辑中的一个片段,由一个 ...