使用 CSS3 中@media 实现网页自适应的示例代码
程序员文章站
2022-06-22 08:48:27
这篇文章主要介绍了使用 CSS3 中@media 实现网页自适应的示例代码,代码简单易懂,非常不错对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 20-03-24...
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。
一、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; }
- mediatype 媒体类型:all,print(打印机)、screen(电脑屏幕、手机等)、speech(屏幕阅读器等设备)
- media_query and | not | only 媒体查询条件运算
- 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网页自适应内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
下一篇: DSA_07:递归算法
推荐阅读
-
css3的@media属性实现页面响应式布局示例代码
-
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
-
实现CSS3中的border-radius(边框圆角)示例代码
-
所谓的网页爬虫用java代码来实现,此代码适合在maven项目中使用中使用,因为,代码中的类所对应的依赖可以让maven下载。
-
使用 CSS3 中@media 实现网页自适应的示例代码
-
HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享
-
css3使用vw和vh实现自适应的代码实例
-
使用纯CSS3实现多层云彩变换飞行动画的示例代码分享
-
HTML5实践-使用CSS3 Media Queries实现响应式设计的代码分享
-
运用@media实现网页自适应中的几个关键分辨率_html/css_WEB-ITnose