CSS3 - 使用媒体查询（media query）适配布局

最新推荐文章于 2024-05-22 12:05:09 发布

就像风1样

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量3.2k

点赞数 2

分类专栏： css CSS样式专栏文章标签： css3 自适应 media query

本文链接：https://blog.csdn.net/qq_42221334/article/details/82492710

版权

CSS3 - 使用媒体查询（media query）适配布局

1，媒体查询的作用

@media (media-feature-name: value) {

/* 符合条件时应用的样式 */

}

上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别应用不同的样式甚至替换整个样式表。
如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。

注意：浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。

2，媒体查询中最常用的媒体特性（media feature）

特性名	值	应用场景
width min-width max-width	显示区域的宽度（对打印机而言是打印表面）	改变布局以适应非常窄（如手机）或非常宽的显示器。
height min-height max-height	显示区域的高度	改变布局以适应非常长或非常短的显示器
device-width min-device-width max-device-width	当前计算机或设备屏幕的宽度（或打印输出时纸面的宽度）	根据不同设备（如手机）调整布局
device-height min-device-height max-device-height	屏幕或纸面的高度	根据不同设备（如手机）调整布局
orientation	landscape（横向）或portrait（纵向）	根据设备的朝向调整布局
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio	显示区域的宽高比（1/1是正方形）	根据窗口形状调整样式（问题可能比较复杂）
color min-color max-color	屏幕颜色的位深（1位表示黑白，目前主流显示器都是24位）	检查是否支持彩色输出（比如是不是黑白打印），或者支持的颜色数量

虽然有这么多媒体特性，但目前最流行最常用的是如下几个：

max-device-width：用于创建手机版网站

max-width：用于针对窗口宽度设定不同的样式

orientation：用于根据平板电脑或iPad的横向或者竖向来改变布局

3，使用样例一默认情况下左栏的背景色是黄色的，当浏览器窗口小于400像素时，左栏的背景色变成橙色。当窗口继续缩小，小于300像素时，左栏的背景色变成红色。

<html lang="en">

<head>

<meta charset="UTF-8">

<title>hangge.com</title>

<style>

* {

margin: 0px;

padding: 0px;

}

.leftColumn {

width: 50%;

float: left;

background-color:yellow;

height:300px;

}

.rightColumn {

width: 50%;

float: left;

background-color:#7FFF9B;

height:300px;

}

@media (max-width: 400px) {

.leftColumn {

background-color:orange;

}

@media (max-width: 300px) {

.leftColumn {

background-color:OrangeRed;

}

</style>

最低0.47元/天解锁文章

就像风1样

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - 使用媒体查询（media query）适配布局

CSS3 - 使用媒体查询（media query）适配布局1，媒体查询的作用 1 2 3 @media (media-feature-name: value) { /* 符合条件时应用的样式 */ } 上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别...
复制链接

扫一扫