详解使用CSS3的@media来编写响应式的页面


Posted in HTML / CSS onNovember 01, 2017

首先要知道,我们为什么要写自适应的页面(响应式页面)

众所周知,电脑、平板、手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m.baidu.com,这样做简直就是费力不讨好的活,所以聪明的程序员开发了一种自适应写法,即一次开发,处处显示!这到底是一个什么样的神器东西呢,接下来就揭晓它的神秘面纱。

CSS3 的 @media 查询

定义和使用

使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。

CSS 语法

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型(mediaType )

类型有很多,在这里不一一列出来了,只列出了常用的几个。

描述
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等。(最常用)
speech 应用于屏幕阅读器等发声设备

媒体功能(media feature)

媒体功能也有很多,以下列出常用的几个

描述
max-width 定义输出设备中的页面最大可见区域宽度
min-width 定义输出设备中的页面最小可见区域宽度

开始编写响应式页面

编写之前呢,有几个要准备的工作

准备工作1:设置Meta标签

首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

  1. width = device-width:宽度等于当前设备的宽度
  2. initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
  3. user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

其他还有很多参数呢,想要了解的童鞋可以直接去百度

准备工作2:加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工作3:设置IE渲染方式默认为最高(可选)

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。

代码实例

1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个 and 连接后面的媒体功能,这里写的是 max-width:300px ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。 2、当文档宽度大于等于300px 的时候显示的样式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

注意,这里的媒体功能使用的是 min-width 而不是 max-width,我已经标红高亮显示出来了。 3、当文档宽度大于等于 300px 并且小于等于500px 的时候显示的样式

注意,这里使用了两个 and ,用来连接 两个媒体功能,一个用于限制最小,一个用于限制最大。

※ 需要注意的地方(划重点)

1、通过灵活应用以上技巧,开发出一个响应式页面,还不是近在咫尺的感觉_(:з」∠)_ 2、不要被 min-width 和 max-width 所迷惑,初学者很容易误以为 min-width 的意思是小于xxx的时候才应用,然而这就陷入误区了,其实它的意思是:当设置了 min-width 的时候,文档的宽度如果小于设置的值,就不会应用这个区块里的CSS样式,所以 min-width 它才能实现大于等于设置的值得时候,才会应用区块里的CSS样式,max-width 也是如此。 3、或者这样想想,先看代码,这句代码的意思是大于等于 300px ,小于等于 500px的时候应用样式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

min-width:300px 的作用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块,即大于等于 300px max-width:500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块,即小于等于 500px 是不是这样想就容易明白了些呢? 4、这里有个弯很难绕过来,自己多动手做做实验,多动脑想想,就豁然开朗了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
CSS3轻松实现圆角效果
Nov 09 #HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 #HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 #HTML / CSS
You might like
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP编写RESTful接口
2016/02/23 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
ES6关于Promise的用法详解
2018/05/07 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
合伙经营协议书范本
2014/04/18 职场文书
团代会宣传工作方案
2014/05/08 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
洗手间标语
2014/06/23 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL