要实现css屏幕大小的自适应，必须首先引入CSS3 @media媒体查询。
媒体的使用和规则：
链接的文档显示在哪个设备上？
用于为不同的媒体类型规定不同的风格。
语法：
@media设备名称only (选择条件) not (选择条件) and (设备选择条件)，设备{sRules}
实例：
/*这是与横向画面匹配的状态，横向画面时的css代码*/
@ mediaalland (orientation : landscape ) }
/*这是与纵向画面匹配的状态，纵向画面时的css代码*/
@ mediaalland (定向：端口) }
@ mediax and (最小宽度：200 px ) }
/*X是媒体类型- -例如print/screen/TV等*
/*宽度超过600px且小于960时，提供(隐藏焦油结构) /
@ mediaalland (min-height :640 px ) and ) max-height3360960px ) {
footer{display:none； }
}
实际使用时，必须首先在HTML的头文件中
在中添加以下代码： 说明：
width=device-width :宽度与当前设备的宽度相同
初始缩放：初始缩放。 默认值为1.0
最小缩放：用户可以缩放的最小比例。 默认值为1.0
最大缩放：用户可以缩放的最大缩放比例(默认值为1.0 )
user-scalable :用户是否可以手动缩放(默认值为no )。 因为用户不想缩放) )。
以下是media型的screen (用于电脑屏幕、平板电脑、智能手机等)。
css自适应屏幕尺寸大方法：
@ mediascreenand (min-width :320 px ) and ) max-width33601156px ) {
. site-bg-dl {
定位：固定；
height: 100%；
width: 100%；
z-index: 0；
background-image : URL (bjxzfwzx/images/bj1.png )；
备份大小： cover；
background-repeat :否- repeat；
背景附加3360固定；
background-size:100% 100%；
-moz-background-size:100%；
}
}
说明：
指示浏览器在屏幕大于320px且小于1156px时执行此代码；
通过将以下内容添加到css中，可以单独定制不同屏幕的显示样式：
/*大屏幕： 1200px*/以上*
@ media (最小宽度：1200 px )…}
/*默认值*
@ media (最小宽度：980 px )…}
/*平板电脑和小屏幕之间的分辨率*
@media(min-width:768px ) and ) max-width3360979px )…}
/*卧式手机和立式平板电脑之间的分辨率*
@media(max-width:767px )…}
/*卧式手机和分辨率更小的设备*
@media(max-width:480px ) . }
到目前为止，已经介绍了关于CSS画面大小自适应实现示例的文章，更多相关的CSS画面自适应内容，请搜索脚本屋以前的文章，或者继续阅读以下相关文章。 我想今后多支持脚本屋。