响应式设计屏幕宽度考虑

Question

我刚开始在项目的前端工作，和往常一样，我必须让它尽可能地响应，所以在处理@media 屏幕的同时，由于屏幕宽度的多样性，我真的迷路了，列表还在继续，但我准备媒体的目的是：

[1024, 1280,1360,1440,1600,1920,2048,2560,3840,...]

所以我想问前端专家的问题是：你会按照列表进行操作吗？或者有更好的做法或更好的方法来完成工作？以及 2 个不同屏幕宽度之间的差距如何（例如：我注意到有时元素变得丑陋，例如在 1500px 屏幕宽度上，我知道可能没有那个尺寸的屏幕，但用户可以减小window 这样大小就可以出现).

感谢您的宝贵时间。

Answer 1

你不想让每个像素都充满@media 屏幕的CSS。只需将基本像素用于手机、人像、风景、平板电脑和桌面等...
当您在 1440px 和 2kpx 之间自定义浏览器时，它们是否具有 1500px 屏幕并不重要，然后 1500 的元素尺寸增加到 1440px。所以不要那么具体。试试这些应该就够了。

<style type="text/css">
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

响应式设计屏幕宽度考虑

responsive design screens width consideration

css

frontend

media-queries

responsive-design