Question

在移动设备上查看我的网站时，内容是对齐的中心（它在桌面视图上的方式），但代价是内容区域甚至比移动设备上的内容区域更小。如果你通过这个移动测试仪查看我的网站，你会明白我的意思。我一直在玩css查询，但由于我是初学者，我没有太多运气。

任何人都可以帮助我让我的内容在较小的设备上填写屏幕，而不是最终作为一个狭长的区域吗？

这是我的网站：http://mobiletest.me/iphone_5_emulator/#u=http://monpetitfour.com

Answer 1

您已为身体内容的左右两侧应用了100px填充。对于移动设备，您应该使用媒体查询缩小或删除它。

 @media screen and (max-width: 400px) {
    body 
    {
      padding:0px 10px;
    }
 }

Answer 2

在页面上添加此css它适用于所有移动设备

@media screen and (max-width:640px) {

body {
    background: none repeat scroll 0 0 #fff;
    padding: 0;
}
#page {
    background-color: #fff;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 1.11111rem;
}

img {
    height: auto;
    max-width: 100% !important;
}
.site-main {
    width: 100%;
}
.simple-social-icons ul li a, .simple-social-icons ul li a:hover {
    background-color: #fff !important;
    border-radius: 3px;
    color: #ccc !important;
    font-size: 24px;
    padding: 8px;
}

}

使用媒体查询移动设备

2 个答案: