css中哪个属性能让手机页面自适应屏幕

html-css016

css中哪个属性能让手机页面自适应屏幕,第1张

在网页代码的头部,加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。

    @media screen and (device-aspect-ratio:1366/1024){

        body{

            background: #000

        }

    }

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)

color-index:检查设备颜色索引表中的颜色,他的值不能是负数。

monochrome:检测单色桢缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)

resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。

grid:检测输出的设备是网格的还是位图设备

貌似,@media是不能适应两个属性,只能是一个,

或者写成这样:

@media screen and (max-device-width: 1366px){

@media screen and (max-device-height:1024px){

body{background:#00}

}

}