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

Swiper响应式博客网站图文幻灯片 - HTML单页

2020-1-16 15:28:29

资源

Fusion App - 所有网页都是客户端

2020-1-15 18:43:37

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