CSS3 @media 查询 - 根据屏幕尺寸采用不同的展示效果

根据不同的页面宽度来执行不同的样式

常用于移动端排版布局使用,响应式开发。

参考:

https://www.runoob.com/cssref/css3-pr-mediaquery.html

定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {
   CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

例子:

https://oss.getimg.net/demo/webpage/2019/05-27.html

WP主题

Killeen - 当代摄影师WordPress作品集主题

2020-2-29 7:43:36

WP教程

wordpress更换域名的几个步骤

2019-6-27 15:23:19

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索