CSS3电脑端、移动端自适应及媒体查询-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

CSS3电脑端、移动端自适应及媒体查询

阅读：1211 输入：2023-06-08 15:20:24

1.手机自适应

name=“viewport” 视口，width=device-width宽度等于视口宽，initial-scale=1.0像素比例，maximum-scale=3.0最大缩放比例，minimum-scale=1.0最小缩放比例，指用户端缩放比例，user-scalable=no是否允许用户缩放。

2.媒体查询

写媒体查询注意：主样式在前，媒体查询在后。

条件的写法：有大-小、小-大一套。

3.实例

预览时，改变浏览器大小与设置移动模式。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,maximum-scale=3.0,width=300,user-scalable=no" />
<style>
.block{
    height:2000px;
    border:1px solid red;
    margin:0 auto;
}
/*all screen*/
@media all and (min-width: 768px) and (max-width: 1024px) {
    .block{
        width:680px;
        background-color:yellow;
    }
}
@media all and (min-width:1024px) and (max-width: 1380px) {
    .block{
        width:1024px;
        background-color:blue;
    }
}
@media all and (min-width: 1580px) {
    .block{
        width: 1190px;
        background-color: red;
    }
}
</style>
</head>
<body>
<div class="block">
法二不改变主样式<br />
<pre>
@media all and (min-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
</pre>
法三<br />
<pre>
@media all and (min-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
</pre>
</div>
</body>
</html>

上一篇：javaScript实现密码框内容的显示、隐藏
下一篇：图片模糊变清晰、变大工具

相关阅读: css3的@media属性实现页面响应式布局示例代码; CSS 响应式导航栏实例; 响应式菜单-自动折叠点击左侧显示菜单