media query语法

最新推荐文章于 2024-09-01 10:12:27 发布
最新推荐文章于 2024-09-01 10:12:27 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38746118/article/details/89929996
版权

设置浏览器宽度大于1000px时的css样式
@media screen and (min-1000px)

设置浏览器宽度小于480px时的css样式
@media screen and (max-480px)

<! DOCTYPE html>
<html>
<head>
	<meta name="viewport" 
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
	<title>光标</title>
	<style>
		#container{
			text-align:center;
			margin:auto;
			width:750px;
		}
		#container>div{
			border:1px solid #aaf;
			text-align:left;
			box-sizing:border-box;
			border-radius:12px 12px 0px 0px;
			padding:5px;
		}
		div#left{
			float:left;
			width:300px;
			height:260px;
		}div#main{
			float:left;
			width:450px;
			height:260px;
		}div#right{
			float:left;
			width:750px;
		}
		@media screen and (min-width:1000px){
			#container{
				text-align:center;
				margin:auto;
				width:960px;
			}
			#container>div{
				border:1px solid #aaf;
				
				box-sizing:border-box;
				border-radius:12px 12px 0px 0px;
				padding:5px;
			}
			div#left{
				float:left;
				width:240px;
				height:260px;
			}
			div#main{
				float:left;
				width:460px;
				height:260px;
				clear:none;
			}
			div#right{
				float:left;
				width:260px;
				height:260px;
			}
		}
		@media screen and (max-width:480px){
			#container{
				text-align:center;
				margin:auto;
				width:450px;
			}
			#container>div{
				border:1px solid #aaf;
				
				box-sizing:border-box;
				border-radius:12px 12px 0px 0px;
				padding:5px;
			}
			div#left{
				float:left;
				width:450px;
				height:150px;
			}
			div#main{
				float:left;
				width:450px;
				height:260px;
				clear:both;
			}
			div#right{
				float:left;
				width:450px;
				height:170px;
			}
		}
	</style>
</head>
<body >
	<div id="container">
		<div id="left">
			<h2>十字箭头光标</h2>
			十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标
			十字箭头光标十字箭头光标十字箭头光标十字箭头光标
		</div>
		<div id="main">
			<h2>代表移动十字箭头光标</h2>
			代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
			代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
			代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
			代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
		</div>
		<div id="right">
			<h2>垂直文本编辑光标</h2>
			垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
			垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
			垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
			垂直文本编辑光标垂直文本编辑光标
		</div>
	</div>
	
</body>

屏幕显示
在这里插入图片描述

但是在浏览器小于480px时并不会显示css的样式
可以将浏览器宽度设置与手机屏幕宽度相同

 <meta name="viewport" content="width=device-width,initial-scale=1.0,
    							minimum-scale=1.0,maximum-scale=1.0" />
qiao_quite
关注
专栏目录
Media query 详解
MR_LP的博客
05-25 1万+
最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢. ������5月24是作者的生日呦,希望大家多多留言点赞!������ 0.前言很多时候,前期使用 HTML 和 CSS 设计的样式非
Media Queries语法总结
博文视点（北京）官方博客
05-29 1579
Media Queries语法总结 Media Queries的语法如下所示： @media [media_query]media_type and media_feature 使用Media Queries样式模块时都必须以“@media”方式开头。 media_query表示查询关键字，在这里可以使用not关键字和only关键字。not关键字表示对后面的样式表达式执行取反操作。例如如下
3.7 Browser -- useMediaQuery
最新发布
weixin_44438233的博客
09-01 533
vueuse源码分析之useMediaQuery
这是媒体查询
csdn_jwdlh的博客
11-05 580
媒体查询什么是媒体查询背景介绍媒体查询的使用组成mediatype 查询类型关键字媒体特性媒体特性（拓展属性——了解）媒体查询语法规范 什么是媒体查询 背景 近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦
media query语法和响应式布局
怪咖
02-03 287
media query语法和响应式布局 media query 语法 media query 的语法稍微有点复杂，语法格式如下： @media not|only 设备类型[and 设备特性] * 在上面语法格式中， [ and 设备特性 ] 部分可以出现 O~N 次，通过使用 多个[and 设备特性］可以对多个设备特性进行匹配。 media query 语法格式中的设备类型如表所示。 实际上...
媒体查询语法
MDR_0820的博客
10-09 1178
媒体查询语法简介 媒体查询（media query）是css3的新语法 使用@media查询可以针对不同媒体类型定义不同的样式 @media 可以针对不同屏幕的尺寸设置不同的样式 当重置浏览器大小的过程中 页面也会根据浏览器的宽度和高度重新渲染页面 语法 @media mediatype and |not |only(media feature){ css-code } 用@ 开头 @media 注意@符号 mediatype 媒体类型 关键字 and not only media featu
简单介绍CSS3中Media Query的使用
09-25
Media Query的语法结构主要包括媒体类型（media type）和媒体特性（media feature）。媒体类型定义了样式应该应用到哪种类型的设备，如`screen`用于电脑显示器，`print`用于打印机。而媒体特性则用于描述设备的具体...
CSS3的media query学习攻略
09-25
media query的基本语法是这样的： ```css @media media-type and (media-feature) { /* 样式规则 */ } ``` 在媒体查询中，可以使用逻辑运算符来组合媒体特性或媒体类型，包括： - `and`：用于组合多个条件，只有当...
CSS3 Media Query CSS3媒介查询
04-17
Media Queries的语法基于CSS的选择器，但其主要目标是根据设备特性来匹配样式。基本语法如下： ```css @media media-type and (media-feature) { /* 样式规则 */ } ``` 1. **media-type**: 定义媒体类型，例如`...
让IE支持CSS3 Media Query实现响应式Web设计
09-22
媒介查询的基本语法如下： ```css @media screen and (max-width: 480px) { /* 当屏幕宽度小于480px时的CSS样式 */ } ``` 其中，`screen`是媒介类型，`max-width: 480px`是断点条件。 然而，不是所有浏览器都原生...
移动开发—媒体查询(Media Query)
道阻且长，行则将至。
05-19 622
移动开发—媒体查询(Media Query) 1、使用@media，可以针对不同的媒体类型定义不同的样式 2、@media可以针对不同的屏幕尺寸设置不同的样式 3、当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 语法规范： 一、mediatype查询类型 可以将不同的设备划分成不同的类型，称为媒体类型 二、关键字语法规范 关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件 三、媒体特性 每种媒体类型都具有各自不同的特性，根据不同的媒体类型设置不同的展示风格，我们暂且了
媒体查询（Media Query)
weixin_45650502的博客
04-01 3184
媒体查询( Media Query )是**CSS3新语法**,是样式
媒体查询（Media Query）是什么
ccc025的博客
06-19 288
媒体查询（Media Query）是CSS3中引入的一个功能，它允许开发者根据不同的设备特征（如屏幕尺寸、设备方向、分辨率等）来应用不同的样式规则。媒体查询使得响应式网页设计成为可能，因为它们可以根据用户的设备和上下文环境改变网页的布局和样式。媒体查询是现代网页设计中的一个核心概念，它们使得网页能够适应不同的设备和屏幕尺寸，从而提供一致的用户体验。规则来实现，可以指定一个或多个媒体类型，并可以包含可选的条件表达式。在这个例子中，如果设备的屏幕宽度小于或等于600像素，那么。媒体查询还可以包含其他条件，如。
媒体查询Media Query
weixin_50723416的博客
03-23 270
媒体查询（Media Query）是CSS3新语法。 @media 可以针对不同的屏幕尺寸设置不同的样式。 语法规范： @media mediatype and | not | only (media feature) { css-code }; @media声明媒体查询 mediatype媒体类型 关键字 and | not | only media feature 媒体特性必须有小括号包含 media媒体类型： all 用于所有设备 print用于打印机和打印预览 scree用于电脑屏幕，平板电脑
媒体查询（media query）总结
qq_51099065的博客
08-22 2205
媒体查询是css3新语法，可以针对不同的媒体类型定义不同的样式，可简单理解为根据页面不同的宽度，来使用不同的css样式。
media query 的用法
Hi, Sun
04-01 305
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
媒体查询漫谈——@media Queries
abc2346789的博客
08-01 166
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备...
CSS3 Media Query
pjx627al的专栏
10-05 9071
http://html.nhndesign.com/blog/42284 找谷歌翻译吧    CSS3 media query에 대하여 HTML/ CSS 2011년 07월 05일 17시 52분 아마티 미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다
media query
weixin_30555753的博客
03-31 76
关于手机屏幕尺寸 参考文章:https://github.com/xiangpaopao/blog/issues/8screen.width和screen.height表示手机的分辨率window.outerWidth和window.outerHeight指浏览器外沿大小(而实际上在有些手机上的显示显然很不靠谱，有时比innerWidth和innerHeight还小)window.innerWi...
@media-query
07-28
@media查询是CSS3的新语法，用于根据不同的媒体类型和媒体特性来应用不同的样式规则。它的语法规范如下：@media mediatype and|not|only (media feature) { CSS-Code; } \[1\]\[2\] 其中，@media开头表示开始一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值