html - 盒子不适合移动设备

Question

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

Desktop view

Mobile View

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有关重新格式化页面以适应移动设备的优秀教程。