响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

        下面介绍一下media媒体查询的使用方法

@media only screen and (min-width:1000px){这里写你的css代码}

and后面的声明改css使用与的屏幕尺寸,min-width在前面说过是一个限制的尺寸,这里值当宽度最小达到1000px启用改media查询的css样式,就是说在1000px以上使用的样式

@media only screen and (max-width:700px){这里写上css样式代码}

这段的max-width和上述类似,规定了最多700px使用css,表述在700px一下使用,那么问题来了,在700-1000px直接怎么响应呢?

@media only screen and (min-width:700px) and (max-width:999px){我是书写css的区域}

这段代码则响应了700-1000px之前的样式,多个样式屏幕使用同一的样式,多加一个and (屏幕尺寸的样式)就可以搞定,

上述代码表面最小是700和最大999直接使用改代码!

        至此,你有发现问题了没有?做项目时候我们总不能把大量的css代码都写进这么憋屈的一个花括号内吧,当然,这里也给说一下如何移入外部的css方式!

<link rel="stylesheet" href="index1.css" media="screen and (min-width:1201px)"/>
<link rel="stylesheet" href="index2.css" media="screen and (max-width:1200px)" />

    之前我们引入外部css使用的是link这里我们同样使用这个标签来引入外部的css样式表,在标签后面增加属性media就ok,media的值和上述的类似使用"screen and (屏幕尺寸要求)"这样就实现了外部引入的css也完美的使用了media的响应式!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

asp.net中几种页面元素的比较

学习ASP.NET也快三个月了,今天才对页面中几种不同元素区分开,惭愧! 1)HTML元素:跟普通的网页中的标签所定义的一样,没有服务器端的事件响应,能够直接...

19610
来自专栏编程微刊

混合开发

1683
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

4613
来自专栏守望轩

Visual Studio 2008 每日提示(四)

#031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

3215
来自专栏微信小开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS2、inp...

2609
来自专栏Web 开发

iOS自定义键盘搜索键

之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为...

1450
来自专栏coding

了解vue.js的生命周期函数四个生命周期函数两个运行中的事件

882
来自专栏Android干货

Android项目实战(四十):在线生成按钮Shape的网站

29410
来自专栏无原型不设计

【Mockplus教程】复制/粘贴/克隆

1. 复制和粘贴 选中组件后,鼠标右击,在弹出菜单中选择“复制”,然后在需要粘贴的位置鼠标右击,菜单中选择“粘贴”即可。 也可以选中组件后使用快捷键Ctr...

3207
来自专栏听雨堂

动态加载控件

参考文章:http://blog.csdn.net/yicko/archive/2005/04/16/349740.aspx 1、加载的是普通的控件,不是用户控...

2167

扫码关注云+社区

领取腾讯云代金券