media query(媒体查询)与资源引入

最新推荐文章于 2024-06-28 17:35:49 发布

想喝橙汁儿

最新推荐文章于 2024-06-28 17:35:49 发布

阅读量280

点赞数

分类专栏： css 文章标签： css 媒体查询

本文链接：https://blog.csdn.net/weixin_46328144/article/details/110441909

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

媒体查询基础用法

@media screen and (max-width:539px)

screen 与and，单位px不可省略
建议从小往大写，后面的可以覆盖前面的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@media screen and (max-width:539px) {
				body{
					background-color: blue;
				}
			}
			@media screen and (min-width:540px){
				body{
					background-color: green;
				}
			}
			@media screen and (min-width:970px) {
				body{
					background-color: red;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

媒体查询–资源引入

引入资源就是针对不同的屏幕尺寸大小调用不同的css文件

css文件中不用写@media 因为引入时 link 中写了
建议：媒体查询最好的方法是从小到大写
目标：
屏幕大于640时一行显示两个
屏幕小于640时一行显示一个

代码：
style320.css文件

div{
	width: 100%;
	height: 100px;
}
div:nth-child(1){
	background-color: aquamarine;
}
div:nth-child(2){
	background-color: bisque;
}

style640.css文件

div{
	width: 50%;
	height: 100px;
	float: left;
}
div:nth-child(1){
	background-color: aquamarine;
}
div:nth-child(2){
	background-color: bisque;
}

html文件：

		<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"/>
		<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)"/>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
	</body>

想喝橙汁儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
media query(媒体查询)与资源引入

媒体查询基础用法@media screen and (max-width:539px)screen 与and，单位px不可省略建议从小往大写，后面的可以覆盖前面的<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @media screen and (max-wid
复制链接

扫一扫