CSS3之媒体查询

最新推荐文章于 2022-08-01 12:49:41 发布
最新推荐文章于 2022-08-01 12:49:41 发布
阅读量143 收藏
点赞数
分类专栏： CSS3 HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36729274/article/details/80762099
版权
CSS3 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
HTML5
13 篇文章 0 订阅
订阅专栏

关键字 @media

其中screen是代表显示器，如果是打印机等其他设备可相应修改；a.谨记and后面必须含有空格！！！b.就是媒体查询的大范围会覆盖小范围，所以编写的时候要先写大范围，不然小范围的样式会被覆盖！！！

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" />
//引入外部文件的方式
< link rel= "stylesheet" type= "text/css" href= "外部css文件" media= "screen and (max-width:960px)" >
< title >Document </ title >
< style >
/*内部使用的方式*/
@media screen and ( max-width: 960){
body{
background: red
}
}
< / style >
</ head >
< body >
< h1 >你好 </ h1 >
< p >响应式 </ p >
</ body >
</ html >

小例子

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" />
<!-- <link rel="stylesheet" type="text/css" href="外部css文件" media="screen and (max-width:960px)" > -->
< title >Document </ title >
< style >
/*内部使用的方式*/
body , div{
padding: 0px;
margin: 0px;
}
div{
width: 100%
}
section{
width: 25%;
height: 200px;
float: left;
border: 1px solid red;
box-sizing: border-box;
overflow: hidden
}
@media screen and ( max-width: 960px){
section{
width: 50%;
height: 200px;
float: left;
border: 1px solid red;
box-sizing: border-box;
overflow: hidden
}
}
@media screen and ( max-width: 500px){
section{
width: 100%;
height: 200px;
float: left;
border: 1px solid red;
box-sizing: border-box;
overflow: hidden
}
}
< / style >
</ head >
< body >
< div >
< section >< img src= "../imegs/1.jpg" /></ section >
< section >< img src= "../imegs/1.jpg" /></ section >
< section >< img src= "../imegs/1.jpg" /></ section >
< section >< img src= "../imegs/1.jpg" /></ section >
</ div >
</ body >
</ html >

薛中然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
媒体查询Media Query
weixin_50723416的博客
03-23 240
媒体查询（Media Query）是CSS3新语法。 @media 可以针对不同的屏幕尺寸设置不同的样式。 语法规范： @media mediatype and | not | only (media feature) { css-code }; @media声明媒体查询 mediatype媒体类型 关键字 and | not | only media feature 媒体特性必须有小括号包含 media媒体类型： all 用于所有设备 print用于打印机和打印预览 scree用于电脑屏幕，平板电脑
CSS3中的媒体查询
qq_42702425的博客
10-25 236
1- 理解： (1)- 能使一个网站可以兼容多个终端(手机\ipad\电脑..)； (2)- 针对不同的媒体类型定义不同的样式； (3)- 使网站在传统浏览器、手机和平板电脑浏览器上展现出很好的效果。 2- 作用： 使用媒体查询，可以在不改变页面内容，不造成布局错乱的情况下， 根据浏览器窗口的宽度，设置不同的样式， 为不同的设备定制很好的效果。 3- 媒体类型 all 用于所有配置； ...
css3 媒体查询
Ming-code
08-23 359
/* 小于400 */ @media screen and (max-width:300px) { html,body { font-size:0.58rem; } }/* 大于960 小于1200 */ @media screen and (min-width:301px) and (max-width:350px) { html,body { font-size:0.6rem...
CSS3的媒体查询
hao_sir
03-21 213
CSS中的Media Query（媒介查询）是什么？ 作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。 通过不同的媒体类型和条件定义样式表规则。 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。 媒体查询的大部分媒体特性都接受min和max用于...
css3媒体查询
m0_68807300的博客
04-30 740
媒体查询 (Media Query) 是css3的新语法 1.使用 @media 查询，可以针对不同的媒体类型定义不同的样式 2.@media 可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽高重新渲染页面 4.目前手机平板多在用媒体查询 语法规范 @media mediatype and|not|only (media feature) { css-code...
CSS3 多媒体查询
12-13
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些...
CSS3媒体查询Media Queries基础学习教程
09-24
主要介绍了CSS3媒体查询基本学习教程,包括基本的语法和逻辑操作符,以及媒体查询可检测的特性与利用viewport禁止用户缩放等部分的内容,需要的朋友可以参考下
CSS3 多媒体查询实例
12-13
接下来，我们使用CSS3的媒体查询来改变不同屏幕尺寸下的样式： 1. **520px至699px宽度**：在这个范围内，我们为链接添加邮件图标。通过以下CSS实现： ```css @media screen and (max-width: 699px) and (min-...
CSS3媒体查询(Media Queries)介绍
09-25
CSS3媒体查询（Media Queries）是现代网页设计中不可或缺的一部分，它允许开发者根据设备的特定特性，如屏幕尺寸、分辨率、方向等，来定义和应用不同的样式规则。媒体查询极大地促进了响应式网页设计的发展，使得...
CSS3媒体查询
上海刚子的专栏
04-16 724
Contents  [hide]  1 背景2 媒体查询3 语法 3.1 错误处理 4 媒体特性 4.1 width4.2 height4.3 device-width4.4 device-height4.5 orientation4.6 aspect-ratio4.7 device-aspect-ratio4.8 color4.9 color-index4.10 monoc
CSS3一般媒体查询
wing 的专栏
01-19 639
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) -----------
CSS3媒体查询(@media)详细总结和Responsive浅谈
王乐平 技术博客
11-22 1万+
引言一直想对CSS3的媒体查询和Responsive进行一下记录和总结，今天拿出点时间来做一下。媒体查询的历史随着浏览器终端的多样化，无法保证一个网页在不同的设备上呈现出想同的结果，所以Media Query诞生了，让一个页面适用不同的终端。 Media Query早在CSS2的时候就出现，CSS2用<link />标签，而CSS3用@media定义的CSS里面。两者用法类似，但是CSS3与CSS
CSS3媒体查询和手机自适应
weixin_43661559的博客
12-12 813
一、媒体查询 在CSS3中写入媒体查询时，要注意将主样式写在前面，媒体查询写在后面。 媒体查询的编写主要有两种方法，一种是从小到大，一种是从大到小。大小同时使用编写代码时也要按照这两种方法排序。 在@media之后可写all、screen或者省略，all表示所有，screen表示所有的屏幕。 设置主样式为： .block{ height: 2000px; bor...
CSS3 媒体查询
m0_67401417的博客
08-01 3508
CSS3媒体查询（MediaQuery）语法的特性①使用@media查询，可以针对不同的媒体类型定义不同的样式；②@media可以针对不同的屏幕尺寸设置不同的样式；③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询....
CSS媒体查询及其使用
weixin_30361753的博客
02-04 262
准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： html 代码 1 <name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scal...
CSS3媒体查询(Media Queries)与移动设备显示尺寸大全
u012396616的博客
10-17 5949
最近在做公司官网，需要适配移动端，于是结合自己以前总结的知识，以及在网上找到的相关资料供大家参考。 举个栗子： &lt;link rel="stylesheet" media="screen and (max-width: 375px)" href="solution_schoolNet.css" /&gt; 此media属性值的意思是：当页页宽度小于或等于600px,就调用soluti...
移动端设置了user-scalable=no，怎么用户还能缩放
热门推荐
asparagus888的博客
03-20 4万+
 原因很简单，他前面的只能是逗号，分号就会出错 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0;user-scalable=no"&gt;
CSS3 - 使用媒体查询（media query）适配布局
boy火巨的博客
09-07 3291
CSS3 - 使用媒体查询（media query）适配布局 1，媒体查询的作用 1 2 3 @media (media-feature-name: value) {     /* 符合条件时应用的样式 */ } 上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别...
css3的媒体查询怎么用
最新发布
06-09
CSS3的媒体查询（Media Queries）是响应式设计的核心组成部分，它允许网页内容根据设备的特性（如屏幕尺寸、分辨率、颜色模式、方向等）动态调整布局和样式。媒体查询使用 `@media` 规则定义条件，当满足这些条件时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值