英溯IT论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1522|回复: 0

@media 可以针对不同的屏幕尺寸设置不同的样式

[复制链接]

105

主题

113

帖子

590

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
590
发表于 2023-2-8 15:36:01 | 显示全部楼层 |阅读模式
<!-- 宽度大于 900px 的屏幕使用该样式 --><link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">


@media screen and (max-width: 600px) {
  main {
    flex-direction: column;
  }
}

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







回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|英溯IT论坛 ( 沪ICP备13022730号-6 )

GMT+8, 2024-12-31 04:30 , Processed in 0.259806 second(s), 79 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表