Question

所以我的网站在桌面上很好，没问题。但是当我按照说法在手机上查看它时，画廊页面非常混乱。现在我还没有弄清楚如何使它兼容！请帮忙，这是网站： http://www.marbleddesigns.com/

Answer 1

使用mediaquery使网站在其他设备上展示良好，我们称之为响应式网页设计

@media (max-width: 767px) {
  // Style for devices have width <= 767px; 
}
@media (max-width: 1023px) and (min-width: 768px) {
  // Style for devices have width >= 768px and <= 1023px;
}
@media (min-width: 1024px) {
  // Style for devices have width >= 1024px;
}

您可以为页面上的元素添加样式。

我在此处添加了simple responsive grid system，您可以复制我的mediaquery css并在您的网站上添加课程，以使其在其他设备上正常运行。

Answer 2

有两种主要方法可以使您的网站可用并在多种设备上做出响应。

我/在定义div的大小时，确保使用百分比（％）。这将确保网站适应屏幕的大小，从而适应不同的分辨率。当考虑创建一个网站时，总是在不同的浏览器和设备上查看它是否在每个地方看起来都很好。

II /其他选择当然是使用媒体查询。他们是这样的结构：

@media only screen and (max-width: 600px) {color:red;}

如果条件符合我们示例中的屏幕大小，它们基本上会应用规则，如果浏览器窗口宽度小于600pw，文本将变为红色。

对于一些好的教程，我推荐这些链接：

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

使网站与其他设备兼容

2 个答案: