CSS之media query模板

在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竖板显屏

这里写图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407141.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

自定义ActiveX组件在设计阶段，切换属性页后出现异常

自定义ActiveX组件在设计阶段，切换属性页后出现异常

源码下载&#xff1a;ActiveX-Clock-OCX 参照孙鑫的<<VC深入详解>>中第18章自定义ActiveX中的Clock例子(到18.3节之前)&#xff0c;完成了OCX控件的制作&#xff0c;而且也编译(Debug模式)、注册成功了&#xff01;于是又创建了一个MFC基于对话框的测试程序&#x…
阅读更多...
React开发（132）:ant design学习指南之form中控制展开和关闭逻辑

React开发（132）:ant design学习指南之form中控制展开和关闭逻辑

阅读更多...
C#正则表达式整理备忘

C#正则表达式整理备忘

转载于&#xff1a;http://www.cnblogs.com/KissKnife/archive/2008/03/23/1118423.html有一段时间&#xff0c;正则表达式学习很火热很潮流&#xff0c;当时在CSDN一天就能看到好几个正则表达式的帖子&#xff0c;那段时间借助论坛以及Wrox Press出版的《C#字符串和正则表达式…
阅读更多...
vue.js 引用背景图 background 无效的3种解决办法

vue.js 引用背景图 background 无效的3种解决办法

&#xff03;vue.js项目中&#xff0c;出现css调用background背景图无效&#xff1f;如何解决&#xff1f; 或者调用<img>标签&#xff0c;也无效果&#xff1f; 直接上代码&#xff0c;自行对比查找一下&#xff1a; 效果图预览 1. 正确的代码&#xff0c;示例如下&…
阅读更多...
CSS之Responsive网页设计的三个特性

CSS之Responsive网页设计的三个特性

Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上&#xff0c;他将是一个最受欢迎的网页设计概念&#xff0c;因为随着网站用户日渐多样化的访问方法&#xff0c;比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不…
阅读更多...
什么是awk?

什么是awk?

你可能对UNIX比较熟悉&#xff0c;但你可能对awk很陌生&#xff0c;这一点也不奇怪&#xff0c;的确&#xff0c;与其优秀的功能相比&#xff0c;awk还远没达到它应有的知名度。awk是什么&#xff1f;与其它大多数UNIX命令不同的是&#xff0c;从名字上看&#xff0c;我们不可能…
阅读更多...
React开发（133）:ant design学习指南之form中input加前缀

React开发（133）:ant design学习指南之form中input加前缀

阅读更多...
CSS之不使用Media Queries的自适应CSS

CSS之不使用Media Queries的自适应CSS

虽然标题说不用Media Queries&#xff0c;但我还是要在开头讲清楚&#xff0c;本文并不是要大家丢掉Media Queries&#xff0c;也不是要抨击Media Queries。Media Queries实际上非常有用&#xff0c;我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题 本…
阅读更多...
Taro+react开发（32） Please use the ‘new‘ operator, this DOM object constructor cannot be called as a fu

Taro+react开发（32） Please use the ‘new‘ operator, this DOM object constructor cannot be called as a fu

2.Failed to construct Image: Please use the new operator, this DOM object constructor cannot be called as a function 像上面这种错误都是使用了元素&#xff0c;但没有import到文件导致。
阅读更多...
0920

0920

今天的亚洲区网络赛我们学校第一次把工大和工程干掉了 有一种慕名奇妙的自豪感 转载于:https://www.cnblogs.com/zhanzhao/p/3983866.html
阅读更多...
Linux下的文件系统与目录系统简介

Linux下的文件系统与目录系统简介

Linux下的文件系统与目录系统简介一. 文件系统 LINUX有四种基本文件系统类型&#xff1a;普通文件、目录文件、连接文件和特殊文件&#xff0c;可用file命令来识别。 普通文件&#xff1a;如文本文件、C语言元代码、SHELL脚本、二进制的可执行文件等&#xff0c;可用cat、less、…
阅读更多...
修改DOS窗口编码格式

修改DOS窗口编码格式

1、打开CMD.exe命令行窗口 2、通过 chcp命令改变代码页&#xff0c;UTF-8的代码页为65001 F:\trash> chcp 65001执行该操作后&#xff0c;代码页就被变成UTF-8了。但是&#xff0c;在窗口中仍旧不能正确显示UTF-8字符。 3、修改窗口属性&#xff0c;改变字体 在命令行标题栏…
阅读更多...
CSS3属性之text-indent文本缩进使用详解

CSS3属性之text-indent文本缩进使用详解

1、定义&#xff1a;text-indent 属性规定文本块中首行文本的缩进。 2、使用&#xff1a; 将段落的第一行缩进2em&#xff1a; div{text-indent:2em;} 注意: 1em等于一个汉字的大小 3、注意事项&#xff1a; 3-1、允许使用负值。如果使用负值&#xff0c;那么首行会被缩进…
阅读更多...
Taro+react开发（33） Super expression must either be null or a function, not undefined

Taro+react开发（33） Super expression must either be null or a function, not undefined

阅读更多...
CSS之Responsive设计和CSS3 Media Queries的结合

CSS之Responsive设计和CSS3 Media Queries的结合

随着高科技的发展&#xff0c;现在我们浏览网页不在局限于PC机上了&#xff0c;用户可使用上网的设备是越来越多的品种&#xff1a;手机、小笔记本、iPad、Playbook&#xff0c;以及PC机&#xff0c;而且PC机的显展大小各不一致。这样一来不同的屏幕分辨率范围就产生了&#xf…
阅读更多...
服务器性能测试典型工具介绍

服务器性能测试典型工具介绍

服务器性能测试典型工具介绍 众所周知&#xff0c;服务器是整个网络系统和计算平台的核心&#xff0c;许多重要的数据都保存在服务器上&#xff0c;很多网络服务都在服务器上运行&#xff0c;因此服务器性能的好坏决定了整个应用系统的性能。现在市面上不同品牌、不同种类的服务…
阅读更多...
select count(*) into 也会报 NO_DATA_FOUND 异常?!

select count(*) into 也会报 NO_DATA_FOUND 异常?!

From: http://www.cnblogs.com/howelei/archive/2006/12/21/599268.html 我们知道NO_DATA_FOUND异常情况仅仅被SELECT..INTO语句触发&#xff0c;当该WHERE子句没有找到任何行的时候就会触发它。 解决的方法通常有两种&#xff1a; 一种是我们将查询语句写成游标&#xff0c;这…
阅读更多...
React开发（134）:ant design学习指南之form中getFieldValue

React开发（134）:ant design学习指南之form中getFieldValue

阅读更多...
CSS之Responsive设计的关键三步

CSS之Responsive设计的关键三步

下面我们就通过这篇教程&#xff0c;帮助大家从三个步骤来了解和学习“Responsive”设计 第一步&#xff1a;Meta标签 大家都知道&#xff0c;现在智能手机上浏览web页面会让页面适应屏幕的大小&#xff0c;显示在屏幕上。不过我们可以通过“meta”标签对他进行重置&#xff…
阅读更多...
三招快速重新打开被关闭的Chrome标签页

三招快速重新打开被关闭的Chrome标签页

在 Chrome 这样的多标签页浏览器中&#xff0c;不小心关闭一个标签页实在是太常见的事情了。当这种情况发生时&#xff0c;我们有三个办法可以重新打开这个刚刚关闭的页面。 1&#xff0c;打开一个新的标签页&#xff0c;在新标签页页面最下方会有一行 Recently closed 最近关闭…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023