html媒体查询怎么把文字折叠,媒体查询 media 常用的方式

一：媒体查询media用法剖析@media all and (min-width: 400px)

{

.box

{

width:400px;height:400px;background:red;

}

}

@media all and (max-width: 399px)

{

.box

{

width:200px;height:200px;background:blue;

}

}

/*

all 媒体类型

and 关键字( not 和only)

(min-width: 400px) 媒体特性

orientation:横竖屏切换

landscape   横屏

portrait    竖屏

PC IPAD 手机

1024 400 220

*/

@media all and (min-width:1200px)

{

.box

{

width:1200px;height:500px; background:red;

}

}

@media all and (min-width:1024px) and (max-width:1199px)

{

.box

{

width:1024px;height:400px; background:blue;

}

}

@media all and (min-width:400px) and (max-width:1023px)

{

.box

{

width:400px;height:300px; background:yellow;

}

}

@media all and (min-width:220px) and (max-width:399px)

{

.box

{

width:200px;height:200px; background:pink;

}

}

@media all and (max-width:219px)

{

.box

{

width:100px;height:100px; background:#000;

}

}

/*

min-width:1200px 分辨率 最小在1200 之上包括1200

max-width:1024px 分辨率在1024以下 包括1024

*/

二：媒体查询模板，支持视网膜屏/*一般媒体查询

这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，

这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。*/

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px) and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

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

/* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ----------- */

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

/* Styles */

}

/* Large screens ----------- */

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

/* Styles */

}

/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

/* Styles */

}