使用 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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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
php fckeditor 调用的函数
2009/06/21 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP中header用法小结
2016/05/23 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python获取邮件地址的方法
2015/07/10 Python
详解Python发送邮件实例
2016/01/10 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python高斯消除矩阵
2019/01/02 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
大学总结自我鉴定
2014/01/18 职场文书
小学教师师德反思
2014/02/03 职场文书
建议书怎么写
2014/03/12 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android