移动端第十二章媒体查询

最新推荐文章于 2022-10-20 15:30:00 发布

小涛涛啊！

最新推荐文章于 2022-10-20 15:30:00 发布

阅读量313

点赞数

分类专栏：移动端内容文章标签：移动端媒体查询

本文链接：https://blog.csdn.net/t5555666/article/details/108835591

版权

第十二章媒体查询

1：什么是媒体查询：

媒体查询是css3新的语法：
@media only screen and (min-width: ) {
		属性：属性值；	
}

@media only screen and (min-width: 100px) and (max-width: 640px) {
		属性：属性值；	
}
screen 		用于电脑屏幕，平板电脑，智能手机等。
only		唯一（忽略）
and			并且（不常用）
min-width	屏幕最小宽度值
max-width	屏幕最大宽度值

2：媒体查询的作用：

通过媒体查询的语法可以针对不同的屏幕尺寸设置不同的样式，
特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

3：引入资源
–说白了就是根据设备屏幕的宽度，引入不同的css文件
语法：

<link rel="stylesheet" type="text/css" href="index1.css" media="screen and(min-width:320px)"/>
<link rel="stylesheet" type="text/css" href="index2.css" media="screen and(min-width:640px)"/>

<!DOCTYPE html>
<html>
	<head

最低0.47元/天解锁文章

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端第十二章媒体查询

第十二章媒体查询1：什么是媒体查询：媒体查询是css3新的语法：@media only screen and (min-width: ) { 属性：属性值； }@media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； }screen 用于电脑屏幕，平板电脑，智能手机等。only 唯一（忽略）and 并且（不常用）min-width 屏幕最小宽度值max-width 屏幕最
复制链接

扫一扫