<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div{

                 width: 1200px;

                 height: 100px;

                 background-color: #87CEEB;

             }

             /*当浏览器窗口小于960时*/

             @media only screen and (min-width: 641px) and (max-width: 960px) {

                 div{

                     width: 100%;

                     background-color: yellow;

                 }

             }

             /*当浏览器窗口小于640时*/

             @media only screen and (max-width: 640px) {

                 div{

                     width: 100%;

                     background-color: #9ACD32;

                 }

             }

             /*当浏览器窗口大于等于960时*/

             @media only screen and (min-width: 961px) {

                 div{

                     width: 100%;

                     background-color: #87CEEB;

                 }

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </html>

CSS-18-媒体查询的更多相关文章

  1. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  2. CSS Media媒体查询使用大全，完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  3. css自媒体查询

    准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content=& ...

  4. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  5. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  6. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  7. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  8. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  9. css媒体查询aspect-ratio宽高比在less中的使用

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配   使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...

  10. 轻轻松松学CSS:媒体查询

    轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...

随机推荐

  1. CSS一行显示，显示不下的用省略号显示

    CSS一行显示,显示不下的用省略号显示 .abc{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 复制上面代码即可 ...

  2. 根据经纬度查询附近几公里的门店（<5）代表5公里

    select * from 表名 where status=1 and isopen =0 and jingyingtype=1 and waimai=1 and bstatus = 1 and (a ...

  3. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  4. Linux基础：Linux下常用命令

    常用命令 shutdown ​ 用来系统关机命令.shutdown指令可以关闭所有程序,并依用户的需要,进行重新开机或关机的动作. ​ shutdown (选项)(参数) -c: 当执行"s ...

  5. NI LabVIEW 编程规范

    LabVIEW程序编写应该遵循哪些规范? 遵循这些规范有什么好处? 具体细节是什么? 针对上面三个问题一一解答: 一．LabVIEW程序编写应该遵循哪些规范? (1)前面板.后面板控件整齐,尽可能在一 ...

  6. T-SQL代码搜索

    SET ANSI_NULLS ON; SET ANSI_PADDING ON; SET ANSI_WARNINGS ON; SET CONCAT_NULL_YIELDS_NULL ON; SET NU ...

  7. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  8. python入门之字符串的魔法

    1.test="alex" v=test.capitalize() print(v)               //输出结果首字母大写 2.test1="alex&qu ...

  9. word HTML文件与Markdwon互相转换的几种方式

    Tip:word文件与Markdwon转换往往是可逆的.无论使用哪种方式,要想完美转换,必须要预先处理掉markdown与word不兼容的格式,如word文件对象,带边框的代码块等等 方法一:借助pa ...

  10. lombok优缺点

    优点: 能通过注解的形式自动生成构造器.getter/setter.equals.hashcode.toString等方法,提高了一定的开发效率 让代码变得简洁,不用过多的去关注相应的方法 属性做修改 ...