详解CSS3中@media的具体应用

日期:2021-03-05 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

英语的语法:

CSS Code拷贝內容到剪贴板
  1. @media :<sMedia> { sRules }  

赋值:

<sMedia>:
    特定机器设备名字。
{sRules}:
    款式表界定。

表明:

分辨媒体(目标)种类来完成不一样的呈现。此特点让CSS能够更精准功效于不一样的媒体种类,同1媒体的不一样标准(辨别率、色数这些).


拷贝编码
编码以下:
media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid


普遍写法:
 

CSS Code拷贝內容到剪贴板
  1. @media screen and (max-width600px) { /*当显示屏尺寸小于600px时,运用下面的CSS款式*/  
  2.   .class {   
  3.     background#ccc;   
  4.   }   
  5. }  

@media screen and这是1种最多见的写法,后边跟上限制的显示屏尺寸
带all 跟 only的写法

1般all跟only全是对应在1起出現的
 

CSS Code拷贝內容到剪贴板
  1. @media all and (min-width:xxx) and (max-width:xxx){   
  2. /*这段查寻的all是对于全部机器设备(一些机器设备不1定是显示屏,或许是打字机,视障阅读文章器)*/  
  3. }   
  4.     
  5. @media only screen and (min-width:xxx) and (max-width:xxx){   
  6. /*上面对于了全部机器设备,这段是只(only)对于五颜六色显示屏机器设备*/  
  7. }   

device-aspect-ratio  

device-aspect-ratio能够用来兼容特殊显示屏长宽比的机器设备,这也是1个很有效的特性,例如,大家的网页页面要想对长宽比为4:3的一般显示屏界定1种款式,随后针对16:9和16:10的宽屏,界定另外一种款式,例如自融入宽度和固定不动宽度:
用法:
 

CSS Code拷贝內容到剪贴板
  1. @media only screen and (device-aspect-ratio:4/3)