css3中@media

最新推荐文章于 2024-06-01 09:39:57 发布

顾智道

最新推荐文章于 2024-06-01 09:39:57 发布

阅读量842

点赞数

分类专栏：知识文章标签： css3

本文链接：https://blog.csdn.net/weixin_50564041/article/details/108841694

版权

1、@media的定义和使用：（1）使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。（2）@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。（3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。@media mediatype and|not|only (media feature) { CSS-Code;}你也可以针对不同的媒体使用不同 stylesheets :<l

摘要由CSDN通过智能技术生成

1、@media的定义和使用：
（1）使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
（2）@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
（3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。

最低0.47元/天解锁文章

顾智道

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3中@media

1、@media的定义和使用：（1）使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。（2）@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。（3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。@media mediatype and|not|only (media feature) { CSS-Code;}你也可以针对不同的媒体使用不同 stylesheets :<l
复制链接

扫一扫