CSS 媒体查询适配

圆圆的冬瓜

发布于 2022-06-17 11:56:06

1.2K0

发布于 2022-06-17 11:56:06

常用的一些关键字*

max-width最大宽度

@media screen and (max-width:900px){ /**最大媒体宽度**/ }

min-width最小宽度

@media screen and (min-width:540px){ /**最小媒体宽度**/   }

not在不满足条件时

@media not print and (max-width: 1200px){ /**排除媒体宽度**/ }

only特定的媒体类型

@media only screen and (min-width: 540px) {  }

and多媒体使用and连接

@media only screen and (min-width: 540px) and (max-width: 1000x) {}

*使用and可以设置多媒体

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

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

<link rel="stylesheet" href=" phone.css" media="screen and (max-device-width:540px)" />

项目实战

常见适配各种屏幕分辨率： 1280 * 1024 ， 1366 * 768 ， 1440 * 900， 1600 * 950 ，1920 * 1080


@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 删除。

css