什么是CSS媒体查询

什么是CSS媒体查询？

一、CSS媒体查询概念
CSS媒体查询即media quaries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率定义不同的样式。
1024分辨率以上适用于：PC端
1024~768分辨率以上适用于：Pad pro
768~450分辨率以上适用于：Pad mini，mobile横屏
450分辨率以下适用于：mobile竖屏

二、CSS媒体查询语法
当分辨率>=500px的时候，会识别大括号里面的代码
@media all and (min-width:500px){
#box{ background:skyblue;}
}

当分辨率<=500px的时候，会识别大括号里面的代码
@media all and (max-width:500px){
#box{ background:skyblue;}
}

@media all and (min-width:500px) and (max-width:800px){
#box{ background:skyblue;}
}

@media print and (min-width:300px){
#box{ background:skyblue;}
p{ text-decoration: underline;}
}

当分辨率<500px的时候，会识别大括号里面的代码 , not条件反过来 , 针对分辨率的
@media not all and (min-width:500px){
#box{ background:skyblue;}
}

@media all and (max-width:1000px){
#box{ background:skyblue;}
}

@media all and (max-width:600px){
#box{ background:green;}
}

当前的分辨率是800?
只有竖屏下，才会触发大括号中的代码
@media all and ( orientation:portrait ){
#box{ background:skyblue;}
}

只有横屏下，才会触发大括号中的代码
@media all and ( orientation:landscape ){
#box{ background:skyblue;}
}

代码解析：

效果图：

常见的媒体类型：
all：用于所有的设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等
speech：用于屏幕阅读器等发声设备

@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

orientation:portrait : 竖屏
orientation:landscape : 横屏
@media all and (orientation:portrait){ }

注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。
注：空格是需要添加的，要符合规范。

link的使用：

 <link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

代码解析：

效果图：

什么是CSS媒体查询相关推荐

css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕手机 (<7 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
CSS媒体查询：最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖？
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...

什么是CSS媒体查询

什么是CSS媒体查询？

什么是CSS媒体查询相关推荐

最新文章

热门文章