使用 css3 中的 @media screen 设置网页样式

Posted 2021-04-09 php开发全程

CSS 中添加 @media screen 属性,根据浏览器不同宽度判断并实现不同的样式。

 

html5 的必填项，设置 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，因为我们不希望用户放大缩小页面）

 

CSS语法：

@media mediatypeand|not|only (media feature) {

    CSS-Code;

}

 

Mediatype类型：

•screen用于电脑屏幕，平板电脑，智能手机等。

•speech应用于屏幕阅读器等发声设备

•print 用于打印机和打印预览

 

 

进入CSS3 Media写法

当页面小于960px的颜色变化，下面设置的是颜色变化。

 

可以设置多种不同尺寸下的css3代码，同时并存，下面是宽度小于420px的颜色变化：

 

 

下面是宽度小于320px的颜色变化：

 

 

当然，你还可以设置更多尺寸的颜色变化，背景图片，让你的页面变得丰富多彩。

---

不懂的留言，每天一篇分享，玩转我们共同的爱好！

你也来投搞！