使用 CSS3 中@media 实现网页自适应的示例代码


Posted in HTML / CSS onMarch 24, 2020

如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。

一、CSS2 中的@media

css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。

 @media sMedia { sRules }

1.1、示例

// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}

二、CSS3 中的@media

@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。

语法:

@media mediatype and|not|only (media feature) {
CSS-sRules;
}
  1. mediatype 媒体类型:all,print(打印机)、screen(电脑屏幕、手机等)、speech(屏幕阅读器等设备)
  2. media_query and | not | only 媒体查询条件运算
  3. media_feature 媒体特征,如最大宽度和最小宽度。

判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型。

2.1、示例

body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/
@media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/
@media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/
@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/
@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/

2.2、媒体特性

描述
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如:96dpi,300dpi,118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

总结

到此这篇关于使用 CSS3 中@media 实现网页自适应的示例代码的文章就介绍到这了,更多相关css3 media网页自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
You might like
解析strtr函数的效率问题
2013/06/26 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
python executemany的使用及注意事项
2017/03/13 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python实现泊松图像融合
2018/07/26 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
法学研究生自我鉴定范文
2013/12/04 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
社区好人好事材料
2014/12/26 职场文书
我的1919观后感
2015/06/03 职场文书
《月光曲》教学反思
2016/02/16 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs