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
}

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

psd 到 html 1920X1080

psd to html 1920X1080

html

css

markup

psd