使用 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 3D位移translate效果实例介绍
May 03 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
json的使用小结
2016/06/08 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
小程序点击图片实现png转jpg
2019/10/22 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
家长会主持词开场白
2014/03/18 职场文书
母亲节演讲稿
2014/05/27 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
环境保护建议书
2014/08/26 职场文书
2014年行政工作总结
2014/11/19 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
python - timeit 时间模块
2021/04/06 Python
python之django路由和视图案例教程
2021/07/26 Python
Python读写yaml文件
2022/03/20 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android