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

约定不等于承诺〃 2022-12-25 11:50 200阅读 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 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 @media媒体查询

目录媒体查询：为不同尺寸的屏幕设定不同的CSS样式 @media常用参数 -------------------

红太狼/ 2023年10月01日 08:49/ 0 赞/ 21 阅读

相关通过媒体查询引入不同的资源文件

假设body里面有两个div，当屏幕宽度>640px的时候，让屏幕一行显示两个div，当屏幕宽度>320px的时候，让屏幕一行显示一个div <body>

亦凉/ 2023年07月03日 06:25/ 0 赞/ 22 阅读

相关 CSS3 @Media 媒体查询

CSS3 媒体类型 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr>

素颜马尾好姑娘i/ 2023年01月23日 14:51/ 0 赞/ 256 阅读

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

媒体查询基础用法 @media screen and (max-width:539px) screen 与and，单位px不可省略建议从小往大写，后面的可以覆盖前

约定不等于承诺〃/ 2022年12月25日 11:50/ 0 赞/ 201 阅读

相关 CSS3 之媒体查询Media Query

　　Media Queries是CSS3有关媒体查询的属性，有了CSS3 之媒体查询Media Queries就可以进行媒体查询，针对每个不同的媒体进行不同的样式编写。传说中的

旧城等待，/ 2022年09月17日 05:30/ 0 赞/ 288 阅读

相关 media type(媒体类型)与media query(媒体查询)简介及使用方法介绍

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media q

柔光的暖阳◎/ 2022年08月24日 04:19/ 0 赞/ 777 阅读

相关 media媒体查询

1、根据不同的浏览设备加载不同的css <!DOCTYPE html> <html lang="en"> <head> <meta char

刺骨的言语ヽ痛彻心扉/ 2022年06月03日 09:51/ 0 赞/ 267 阅读

相关媒体查询 @media

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

绝地灬酷狼/ 2022年05月11日 10:36/ 0 赞/ 296 阅读

相关 CSS3新增的表格、列表属性以及media query媒体查询

CSS针对表格、列表等特定组件提供了相应的属性，通过表格相关属性可以控制表格的边框样式、表格标题所在位置、表格布局等；通过列表相关属性则可以控制列表样式，包括改变列表项的标记，

柔情只为你懂/ 2022年04月23日 11:06/ 0 赞/ 221 阅读

相关关于media媒体查询

CSS3 @media 查询 1.一种是直接在link中判断设备的尺寸，然后引用不同的css文件： <link rel="stylesheet" type=

待我称王封你为后i/ 2021年11月09日 18:31/ 0 赞/ 404 阅读