如何创建手机屏幕可比的网站

Question

如何让我的网站移动，因为如果我的网站是在移动设备上观看，那么我的网站设计不适合，标题&页脚不平衡

请建议我的网站有什么变化在手机上良好的视图。

Answer 1

你可以使用mediaqueries*，你应该研究一下响应式设计:

body{
    background-color: red;
}
@media screen and (max-width: 800px) {
    body{
        background-color: green;
    }
}
@media screen and (max-width: 500px) {
    body{
        background-color: yellow;
    }
}

上面的代码是一个简单的例子。正文默认为红色，小于800px为绿色，小于500px为黄色。您可以只对打印、min-width:1024px或orientation:landscape执行此操作。很多选项:)

小费:
这个技巧将为您节省大量时间:如果为不同的设备定义宽度，请使用标准块行为。这将给你选择使用100%减去margin/padding/border的元素。

#wrapper{
    width: auto;
    display: block;
    margin: 10px;
}

*提供的链接中有仅针对iPhone的示例。我建议你尽量保持它的宽度，这将是更好的从长远来看