CSS 媒体类型

CSS 媒体类型

CSS中的媒体类型语法允许你指定具体的css样式在指定的媒体上呈现。这一方式解决了在不同大小屏幕，媒体类型让也页面可以适配到制定的定义样式。

媒体类型 Media Types

以下的表格中展示了不同的媒体类型以及对应的CSS版本，兼容性和描述说明。

@media 规则

CSS中的 @media 规则语法允许在相同样式表文件中为不同媒体设置不同的样式。例如以下的示例：

@media screen

 p.test {font-family:verdana,sans-serif;font-size:14px;}

@media print

 p.test {font-family:times,serif;font-size:10px;}

@media screen,print

 p.test {font-weight:bold;}

本例中定义了screen, print，以及screen,print类型下p元素中test样式类的字体展示效果。

不同屏幕大小显示设置

我们可以通过@media screen来实现网页中的自适应，也就是让网页在不同屏幕上根据样式定义显示不同的效果。

例如我们常常需要网页兼容电脑屏幕显示以及平板或手机屏幕显示，这是我们可以通过@media screen来定义不同屏幕大小对应元素使用的的css样式来实现。

首先我们需要在网页头部加入如下的 meta 内容。

 meta name= viewport content= width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no 

代码参数解释：

width = device-width：宽度等于当前设备的宽度 height = device-height：高度等于当前设备的高度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

CSS3 Media screen编写

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

 body{

 background: #000;

@media screen and (min-width: 768px){

 body{

 background: #060;

上面的代码表示如果屏幕最大宽度不超过767px时，body的背景色为#000，如果屏幕的最小宽度不小于768px时，body的背景色为#060;

试一试

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59547.html

php手机