使用移动设备的媒体查询答案

【问题标题】：Using media queries for mobile devices使用移动设备的媒体查询
【发布时间】：2015-01-09 14:18:22
【问题描述】：

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

谁能帮我让我的内容在较小的设备上填满屏幕，而不是变成一个又长又窄的区域？

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

【问题讨论】：

【解决方案1】：

您已为正文内容的左侧和右侧应用了 100 像素的内边距。对于移动设备，您应该使用媒体查询来减少或删除它。

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

【讨论】：

非常感谢！我完全忘记了填充！

【解决方案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;
}

}

【讨论】：