怎样通过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. Android 数字签名学习笔记

    Android 数字签名学习笔记 在Android系统中,所有安装到系统的应用程序都必有一个数字证书,此数字证书用于标识应用程序的作者和在应用程序之间建立信任关系,如果一个permission的pro ...

  2. Linux网桥

    linux网桥的功能 转发数据包 网桥的功能在延长网络跨度上类似于中继器,然而它能提供智能化连接服务,即根据帧的终点地址处于哪一网段来进行转发和滤除.网桥对站点所处网段的了解是靠"自学习&q ...

  3. C#性能优化实践【转】

    性能主要指两个方面:内存消耗和执行速度.性能优化简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短. 本文以.NET平台下的控件产品MultiRow为例,描述C# ...

  4. js堆栈溢出错误

    function prompt() { var answer = prompt("What is your name","") if (answer) { al ...

  5. 设计模式六大原则——迪米特法则（LoD）

    1.背景 在图书馆借书.刚開始的时候,直接跑到对应的楼层去,到里面去转,去找要借的书,在里面溜达半天才干找到:后来知道图书馆有一个电脑查询处.然后直接在电脑上输入想要借的书,电脑就会显示你想要借的书的 ...

  6. [原理][来源解析]spring于@Transactional,Propagation.SUPPORTS,以及 Hibernate Session,以及jdbc Connection关联

    Spring 捆绑Hibernate. 夹: 一.  1. Spring 怎样处理propagation=Propagation.SUPPORTS? 2. Spring 何时生成HibernateSe ...

  7. Android提高第十一篇之模拟信号示波器

    上次简单地介绍了AudioRecord和AudioTrack的使用,这次就结合SurfaceView实现一个Android版的手机模拟信号示波器(PS:以前也讲过J2ME版的手机示波器).最近物联网炒 ...

  8. 关于在用Swift开发iOS时如何隐藏NavigationBar和TabBar

    举个例子:如果我有一个页面需要进入时同时隐藏NavigationBar和TabBar,那么我就在那个页面的ViewController的代码里加上下面的代码.就可以实现了.接下来告诉大家每一块要注意的 ...

  9. javaScript 工作必知(八) 属性的特性 值、写、枚举、可配置

    属性的特性 每个对象都拥有属性,属性具有哪些特性呢? 1.属性具有值.  2.属性是否是可写的.            3.是否是可枚举的.            4.是否是可配置的.   " ...

  10. 随滚动条滚动的居中div

    <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...