前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 媒体查询适配

CSS 媒体查询适配

作者头像
圆圆的冬瓜
发布2022-06-17 11:56:06
1.2K0
发布2022-06-17 11:56:06
举报

常用的一些关键字*

max-width最大宽度

代码语言:javascript
复制
@media screen and (max-width:900px){ /**最大媒体宽度**/ }

min-width最小宽度

代码语言:javascript
复制
@media screen and (min-width:540px){ /**最小媒体宽度**/   } 

not在不满足条件时

代码语言:javascript
复制
@media not print and (max-width: 1200px){ /**排除媒体宽度**/ }

only特定的媒体类型

代码语言:javascript
复制
@media only screen and (min-width: 540px) {  } 

and多媒体使用and连接

代码语言:javascript
复制
@media only screen and (min-width: 540px) and (max-width: 1000x) {}

*使用and可以设置多媒体

代码语言:javascript
复制
@media only screen and (min-width: 540px) and (max-width: 1000px) { 
/**使用and可以设置多媒体 /**表示媒体在540px和1000px之间时生效**/ 
} 

media在引入css时可以加media属性来设置在特定媒体下的样式,但是要注意将其写在所有样式的最下方

代码语言:javascript
复制
<link rel="stylesheet" href=" phone.css" media="screen and (max-device-width:540px)" />

项目实战

常见适配各种屏幕分辨率1280 * 10241366 * 768 1440 * 9001600 * 9501920 * 1080

代码语言:javascript
复制

@media only screen and(min-width: 750px) and (max-width: 1280px) {  } 


@media only screen and(min-width: 1281px) and (max-width: 1366px) {   } 


@media only screen and(min-width: 1367px) and (max-width: 1440px) {   } 
 

@media only screen and(min-width: 1441px) and (max-width: 1600px) {   } 


@media only screen and(min-width: 1601px) and (max-width: 1920px) {   } 

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 常用的一些关键字*
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档