使用 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 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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(3) php 函数
2010/02/15 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
json跟xml的对比分析
2008/06/10 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python虚拟环境venv用法详解
2020/05/25 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
考试违纪检讨书
2014/02/02 职场文书
草船借箭教学反思
2014/02/03 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
欢迎领导标语
2014/06/27 职场文书
大学生年度个人总结
2015/02/15 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis