对移动设备使用媒体查询

Question

在移动设备上查看我的网站时，内容居中对齐（与在桌面视图中的方式相同），但代价是内容区域比移动设备上的内容区域更小。如果您通过这个移动测试仪查看我的网站，您就会明白我的意思。我一直在研究 css 个查询，但由于我是初学者，所以运气不佳。

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

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

Answer 1

您已为正文内容的左右应用了 100 像素的内边距。当涉及到移动设备时，您应该使用媒体查询减少或删除它。

 @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;
}

}

对移动设备使用媒体查询

Using media queries for mobile devices

css

mobile

media-queries