Question

我有一个问题。当我从移动设备查看我的欢迎页面（其中包含两个简单的框，实际上只是一张JPG图片）时，这些框不会调整大小，因此它们可以匹配手机大小。他们在桌面上看起来像这样：

HTML ：

<div class="l-sec col-xs-2 col-xs-8 col-sm-6 col-md-3">
    <img class="box" src="images/ex.jpg"> 
    <img class="box" src="images/ex.jpg"> 
</div>

CSS ：

body {
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center; 
}


.box {
    margin: 40px;
    border-radius: 20px;
    box-shadow: 1px 1px 20px 0px #2b2b2b;
    transition: box-shadow 0.3s ease-in-out; 
}

有人能告诉我如何让这些盒子合身并让它们只适合手机吗？我会永远负债:)

Answer 1

要重新格式化移动设备的页面，您需要使用<meta name="viewport" content="width=device-width, initial-scale=1.0">中的元标记head和CSS中的媒体查询。有关重新格式化页面以适合移动设备的优秀教程，请参阅here。

邮箱不适合移动设备

1 个答案: