应用 CSS3 中@media 完成网页页面自融入的示例编码

日期:2020-12-12 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

现如今,电脑上显示信息器的显示屏辨别率向愈来愈大发展趋势,而手机上等挪动机器设备终端设备的辨别率却不能能大到哪里去。愈来愈多的网站,刚开始让自身的网页页面自合适各种各样辨别率,在小辨别率下显示信息基础的內容,在大辨别率下显示信息所有作用,乃至是分多级别的多版本号。

1、CSS2 中的@media

css2里边尽管适用@media特性,可是能完成的作用较为少,1般只用做复印的情况下做独特界定的CSS。

 @media sMedia { sRules }

1.1、示例

// 设定显示信息器用字体样式规格
@media screen {
BODY {font-size:12pt; }
}
// 设定复印机用字体样式规格
@media print {
@import "print.css"
BODY {font-size:8pt;}
}

2、CSS3 中的@media

@media 特性在CSS3里边早已演化成1种 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⑻00px之间+高宽比100px⑷00px之间 蓝色*/
@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 界定在1个纯色架构缓存区中每像素包括的最大纯色原件个数。 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 界定在1个纯色架构缓存区中每像素包括的最少纯色原件个数 min-resolution 界定机器设备的最少辨别率。 min-width 界定輸出机器设备中的网页页面最少可见地区宽度。 monochrome 界定在1个纯色架构缓存区中每像素包括的纯色原件个数。假如并不是纯色机器设备,则值等于0 orientation 界定輸出机器设备中的网页页面可见地区高宽比是不是超过或等于宽度。 resolution 界定机器设备的辨别率。如:96dpi,300dpi,118dpcm scan 界定电视机类机器设备的扫描仪工序。 width 界定輸出机器设备中的网页页面可见地区宽度。

总结

到此这篇有关应用 CSS3 中@media 完成网页页面自融入的示例编码的文章内容就详细介绍到这了,更多有关css3 media网页页面自融入內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!