媒体查询方法总结

媒体查询常用方法

了解CSS中的width、device-width、resolution、aspect-ratio

• width/height ：定义输出设备中的 页面可见区域宽度/高度。

• device-width/height ：定义输出设备的屏幕可见宽/高度。

• resolution ：定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

• aspect-ratio ：定义输出设备中的页面可见区域宽度与高度的比率。

了解media样式的使用方法

1. 一种方法是直接在link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
//示例
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

2. 另一种方法是直接写在 style 标签里：

<style>
    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
      .class {
        background: #ccc;
      }
    }
</style>

单个范围后面覆盖

@media screen and(min-width: 1100px) {
body{font-size: 20px}
} 
@media screen and(min-width: 1280px) {
body{font-size: 22px;}
} 

@media screen and(min-width: 1366px) {

body{font-size: 24px;}
}  

@media screen and(min-width: 1440px) {
body{font-size: 26px }
} 

@media screen and(min-width: 1680px) {
body{font-size: 28px;}
} 
@media screen and(min-width: 1920px) {
body{font-size: 30px;}
} 
/* min-width:尺寸从小到大  max-width:尺寸大小从大到小 

写定的范围

• 4096 * 2560
• 2560 * 1440
• 1920 * 1080
• 1600 * 900
• 1440 * 900
• 1280 * 720

@media screen and (min-width: 1280px) and (max-width: 1440px) {}
@media screen and (min-width: 1441px) and (max-width: 1600px) {}
@media screen and (min-width: 1601px) and (max-width: 1920px) {}
@media screen and (min-width: 1921px) and (max-width: 2560px) {}
@media screen and (min-width: 2560px) and (max-width: 4095px) {}

相关链接：https://blog.csdn.net/zhouzuoluo/article/details/95756442?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link