前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >响应式媒体查询media的用法

响应式媒体查询media的用法

作者头像
十月梦想
发布2018-08-29 11:07:13
1.1K0
发布2018-08-29 11:07:13
举报
文章被收录于专栏:十月梦想

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

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

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

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

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

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

代码语言:javascript
复制
@media only screen and (min-width:700px) and (max-width:999px){我是书写css的区域}

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

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

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

代码语言:javascript
复制
<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的响应式!!!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-2-2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档