15621857753

媒体查询@media使用方法及常用响应式尺寸

来源:齐鲁建站 栏目:Html5 阅读: 日期:2024-05-13

本文介绍了媒体查询@media使用方法及常用响应式尺寸,@media 是CSS中的一种语法,用于在不同的媒体设备(如桌面计算机、平板电脑、手机)上应用不同的样式。@media 规则包含在CSS样式表中,通过添加不同的媒体属性来确定哪个设备上应该应用哪个样式。

以前小编介绍过CSS媒体查询@中screen and和only screen and有什么不同,今天说说媒体查询@media使用方法及常用响应式尺寸

@media的四种写法:

@media:最简单常规的写法

@media screen:应用于显示器、平板电脑、智能手机等屏幕设备

@media print:应用于打印机、打印预览等设备

@media speech:应用于屏幕阅读器

@media与@media screen的区别:

@media screen的css在打印设备里是无效的,@media在打印设备里是有效的

所以,如果css需要用在打印设备里,就用@media ,否则就用@media screen

@media 可以添加多个多个条件,用逗号分隔:

@media screen and (max-width: 600px), screen and (orientation: landscape) {
  /* 当设备的屏幕宽度小于或等于 600 像素,并且设备是横向显示时,背景色为 lightblue */
  body {
    background-color: lightblue;
  }
}

Bootstrap中的响应式尺寸(使用min-width):

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

如果使用max-width,顺序是这样的:

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

也就是说,使用min-width时,的在上面大的在下面,使用max-width就是的在上面小的在下面

高级混合应用

@media screen and (min-width:1200px){} 
@media screen and (min-width: 960px) and (max-width: 1199px) {  }
@media screen and (min-width: 768px) and (max-width: 959px) {  }
@media only screen and (min-width: 480px) and (max-width: 767px){  } 
@media only screen and (max-width: 479px) {  }
/* Large desktop */
@media (min-width: 1200px) { ... } 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... } 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... } 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

基于视窗宽度的媒体查询断点设置

前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt

/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){}

好了,关于媒体查询@media使用方法及常用响应式尺寸就介绍到此,希望对您有所帮助~

展开