psd转html 1920X1080

Question

我有大小为 1920X1080 的文件 .psd。 我需要制作适合大小屏幕的响应式网站。 我用像素完美技术从这个 psd html 制作。 我只是不明白如何从中设计小屏幕。 请指教。

Answer 1

使用 CCS3 媒体查询！桌面优先示例：

// Your code for Desktop devices

@media only screen and (max-width: 768px) {
  // Here your code for mobile
}

或移动优先

// Your code for Mobile devices

@media only screen and (min-width: 768px) {
  // Here your code for tablet
}

@media only screen and (min-width: 992px) {
  // Here your code for Small Desktop
}

不同的规则：

@media screen and (max-width: 992px) and (max-height: 700px) {
      // Code
}

或：

@media screen and (max-width: 992px) and (min-height: 400px) {
      // Code
}

这些只是一些例子。您必须研究媒体查询。