老师 我不会写等比例缩放的可以写响应式自适应吗
来源：3-2 作业题
鹿人神经粉
2019-12-14 22:10:12
响应式这样布局可以吗
iPhone6设备下375 iPad设备768 @media (min-width: 576px) { }和@media (min-width: 768px) { }
1回答
-
好帮手慕夭夭
2019-12-15
同学你好，写的不对，问题如下：
1.iPhone6屏幕分辨率是750px，它的逻辑尺寸为375px。可以按F12查看
2. min-width: 576px表示最小不低于576px , min-width: 768px也符合不低于576px的情况。ipad下的，样式会被iPhone6的样式覆盖。
老师给你写一个例子，参考一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 100px;
background: red;
}
/*ipad */
/*max-device-width 表示设备的最大宽度*/
@media (max-device-width:768px) {
.box{
background: pink;
}
}
/*iPhone 6*/
@media (max-device-width:375px) {
.box{
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题