CSS-@media详解。

keelii 发布于2019-08-23 15:40 / 3497人阅读

摘要：最小宽度上面代码表示当屏幕大于或等于时，将采用样式来渲染页面。是目标显示区域的宽度，例如，浏览器宽度。如果使用，那么当手机由竖变横时，是执行的，因为显示区域发生了变化。通常，面向移动设备用户使用面向设备用户使用。

CSS3@media查询

使用@media查询，你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
媒体类型还支持not和only关键字，它们可以用来更方便的定位某个媒体设备：

not:排除某种制定的媒体类型。
@media not print and(color){}
only:指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器；
@media only screen and(color){}

@media only screen and (max-width:500px){
    .gridmenu{
        width:100%;
    }
    .gridmain{
        width:100%;
    }
    .gridright{
        width:100%;
    }
}

@media的具体使用方式

1.最大宽度Max-Width:

上面代码表示：当屏幕小于600px时，将采用small.css样式来渲染Web页面。
2.最小宽度Min Width:

上面代码表示：当屏幕大于或等于600时，将采用large.css样式来渲染Web页面。
3.多个media使用：

上面的表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

max(min)-device-width和max(min)-width区别

max-device-width和max-width区别：
1.max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2.max-width是目标显示区域的宽度，例如，浏览器宽度。
3.如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为‘PC设备’没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为显示区域即浏览器大小发生了变化。
4.如果使用max-device-width，那么当手机由竖变横时，CSS是执行的，因为显示区域发生了变化。
5.通常，面向移动设备用户使用max-device-width；面向PC设备用户使用max-width。
看看下面的写法：

/*移动设备*/
@media screen and (max-device-width:480px){
    /*CSS代码*/
}
/*PC*/
@media screen and(max-width:1024px){
    /*CSS代码*/
}

min-device-width和min-width的区别，跟max-device-width和max-width的区别是一样的。

云服务器 GPU云服务器判断详解日志详解属性详解算法详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102401.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
css:Media Queries: How to target desktop, tablet a

摘要：涂聚文涂聚文 Media Queries: How to target desktop, tablet and mobile? /* Media Queries: How to target desktop, tablet and mobile? http://webdesignerwall.com/tutorials/css3-media-queries https:/...

fevin 2019-04-23 13:28 评论0 收藏0
总结个人使用过的移动端布局方法

摘要：而淘宝移动端方案，还根据你的去计算，而且会进行整体的缩放。淘宝的这种方案，比上面的代码会好很多。淘宝的方案，解决了另一个问题边框的问题。这篇文章，主要是总结一下，我在移动端布局用过的方法。有三种，一种是响应式布局，利用@meida判断各个size；第二种是REM；最后是设置viewport中的width。响应式布局这种感觉是最好理解了，利用@media进行断点，在每个断点中编写c...

马龙驹 2019-08-20 18:04 评论0 收藏0