CSS之media query模板

最新推荐文章于 2024-05-31 09:06:51 发布
最新推荐文章于 2024-05-31 09:06:51 发布
阅读量690 收藏
点赞数
分类专栏： css 文章标签： css

在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的，但有一个问题大家或许还处在模糊状态，这个CSS3 Media要如何设置各自的临界点？

那么今天我们就针对上面的问题，一起来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述

1.CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板

1.1 使用max-width

这里写图片描述

1.2 使用min-width

这里写图片描述

1.3 max-width和min-width的混合使用

这里写图片描述

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用

1.4 iPhone和Smartphones上的运用

这里写图片描述

max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

1.5 iPads上的运用

这里写图片描述

针对移动设备的运用，如果你想让样式工作得比较正常，需要在<head>添加“viewport”的meta标签

这里写图片描述

2.CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求

2.1 1024px显屏

这里写图片描述

2.2 640px显屏

这里写图片描述

2.3 iPad横板显屏

这里写图片描述

2.4 iPad竖板显屏

这里写图片描述

tian361zyc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS响应式布局——media query（媒介查询）
筱葭的博客
03-13 1万+
①　使用 @media 查询可以针对不同的媒体类型定义不同的样式。 ②　@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。 ③　重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 1、media query的语法： @media 媒介类型and|not|only (媒介特征) { ... } 媒介类型：
CSS媒体查询（@media）全面解析
热门推荐
顺其自然~专栏
05-02 2万+
随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很
CSS的媒体属性media-实用篇(长期更新)
Bennett_G博客
05-02 3094
CSS的媒体属性之media前言✨ 腾讯视频✨ 更新中... 💖💖💖大家如果有其它方案，也可以随时补充💖💖💖 前言 👉👉👉 作为前端程序员，大家一定经历过web端页面实现一定程度的自适应需求。当然目前已经有一些比较成熟的解决方案：px2rem等.... 此文并不会在这上面过多赘述，仅是搜集一些与media属性有关的，用以参考，可以思考一下为什么设置的这样的临界值? ✨ 腾讯视频 @media (max-width:1789px){ body{min-width:1580px} } @
CSS @media 媒体查询全解：打造极致跨平台页面的动态户体体验
最新发布
JINGWHALE
05-31 1120
随着互联网设备的多样化和用户浏览习惯的变化，现代网页设计越来越注重提供跨平台、跨设备的无缝用户体验。CSS媒体查询@media在此背景下扮演着至关重要的角色，它赋予网页设计者精准控制网页样式的能力，使之能随设备环境变化而动态调整，从而打造出高度适应性和互动性的页面体验。本文将深入探讨如何运用@media媒体查询来创造流畅且响应迅速的动态页面。
CSS中media的最全用法格式总结！
weixin_44100002的博客
06-04 6102
目录media的定义和使用给引用样式整体设置media给部分样式设置mediamedia条件总结 media的定义和使用 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 给引用样式整体设置media 格式为：media=条件 ，url('style.css') 条件 <link> 标
CSS 媒体类型：Media Type
梁辰兴的博客
09-20 393
除了上述提到的四种媒体类型，CSS还定义了许多其他的媒体特性，如width（宽度）、height（高度）、color（颜色）等，我们可以根据这些特性为不同的设备和媒体提供不同的CSS样式。例如，可以使用@media规则来控制不同大小视图下的样式，或者与其他CSS规则嵌套使用，来实现更为细致的布局和样式设计。它允许我们为不同的设备类型或媒体类型设置不同的样式表，以便更好地适应不同的设备或媒体。CSS中的@media规则是媒体查询的一部分，用于为不同的媒体类型/设备应用不同的样式。
CSS用户登录login页面html模板
12-04
`来实现垂直居中的登录框，使用`@media query`来处理不同屏幕尺寸下的适配。 登录页面通常需要考虑的几个关键设计元素包括： 1. 响应式设计：确保页面在手机、平板和桌面等不同设备上都能正常显示。 2. 清晰的表单...
基于html和CSS的仿文库模板
02-21
可以使用媒体查询（@media query）根据屏幕尺寸调整布局和样式，以适应手机、平板和桌面等多种设备。 最后，压缩包中的文件可能包含HTML文件、CSS文件以及可能的图片资源。HTML文件是页面内容和结构的源代码，CSS...
DIVCSS模板_css_
10-02
- **响应式设计**：现代模板往往包含媒体查询（`@media query`），使得网页能够根据设备屏幕尺寸自动调整布局。 - **可定制性**：用户可以根据需要修改模板的CSS代码，以适应特定的设计需求。 4. **使用方法** -...
HTML5+CSS3 外贸模板
04-10
响应式设计（媒体查询`@media query`）则允许网站根据设备屏幕尺寸自动调整布局。此外，CSS3还提供了动画和过渡效果，如`transition`和`animation`属性，使得网页动态效果更加流畅。色彩和背景处理也得到了加强，...
植物博客css网站模板下载
04-01
CSS3引入了媒体查询（@media query），使得网页可以根据设备的屏幕尺寸和方向自动调整布局。在这个植物博客模板中，我们可能能看到针对手机、平板和桌面设备的优化，确保无论在哪种设备上，用户都能舒适地浏览内容。...
如何使用媒体查询（media query）来适配不同设备上的样式？
官方推荐
08-21 5318
如何使用媒体查询（media query）来适配不同设备上的样式？
前端学习之css media查询、自定义字体、过度动画、css变换、动画、渐变、多列、字体图标
banliyaoguai的博客
03-24 436
自定义字体/* 自定义字体 *//* 自定义字体名字 *//* 字体路径 */src: url(./汉仪霹雳体简.ttf);<div><p class="font-style-my">测试文字</p></div>
CSS3 媒体查询
m0_67401417的博客
08-01 3511
CSS3媒体查询（MediaQuery）语法的特性①使用@media查询，可以针对不同的媒体类型定义不同的样式；②@media可以针对不同的屏幕尺寸设置不同的样式；③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询....
CSS3媒体查询
Code6E的博客
07-23 498
什么是媒体查询？ 媒体查询(Media Query)是CSS3新语法。 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询 语法规范 @media mediatype and|not|on...
这是媒体查询
csdn_jwdlh的博客
11-05 511
媒体查询什么是媒体查询背景介绍媒体查询的使用组成mediatype 查询类型关键字媒体特性媒体特性（拓展属性——了解）媒体查询语法规范 什么是媒体查询 背景 近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦
CSS媒体类型基本知识
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-16 768
规则允许在相同样式表为不同媒体设置不同的样式。例如同一页面在浏览器屏幕上展示和打印在纸张上字体大小、背景色等属性会有区别，这是因为不同的媒体类型需要的样式不同，为了不重复编写多种样式，于是就产生了媒体类型 @media。
css @media
08-12
@media 是 CSS 中的一个关键字，用于指定不同的 CSS 规则在不同的媒体类型或不同的设备上应用。它允许开发者根据屏幕尺寸、分辨率、设备类型等条件，为不同的环境定制样式。 @media 规则由一个媒体查询条件和一组 CSS 规则组成。媒体查询条件用于指定应用样式的条件，可以包括媒体类型（如 screen、print、speech）、设备特性（如宽度、高度、分辨率等）以及其他条件。当媒体查询条件满足时，其中的 CSS 规则将被应用。 以下是一个示例，演示了如何使用 @media 来定义在不同屏幕宽度下的样式： ```css /* 当屏幕宽度小于等于 600px 时应用这些样式 */ @media (max-width: 600px) { body { background-color: lightblue; } } /* 当屏幕宽度大于 600px 时应用这些样式 */ @media (min-width: 601px) { body { background-color: lightgreen; } } ``` 在上述示例中，如果浏览器窗口宽度小于等于 600 像素，`body` 的背景色将变为浅蓝色；如果浏览器窗口宽度大于 600 像素，`body` 的背景色将变为浅绿色。 通过使用 @media，开发者可以根据不同的媒体类型和设备特性，为不同的屏幕尺寸和设备定制样式，以提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值