响应式设计屏幕宽度考虑答案

【问题标题】：responsive design screens width consideration响应式设计屏幕宽度考虑
【发布时间】：2022-01-14 01:56:09
【问题描述】：

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

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

所以我对前端专家的问题是：您是否按照列表进行操作？还是有更好的做法或更好的方法来完成工作？以及 2 个不同屏幕宽度之间的差距如何（例如：我注意到有时元素会变得丑陋，例如在 1500 像素的屏幕宽度上，我知道可能没有那个尺寸的屏幕，但用户可以减小窗口的大小，所以该大小可能会出现）。

感谢您的宝贵时间。

【问题讨论】：

您为不同类型的设备提供了哪些设计？一旦你有了这些，那么你最多需要每个断点。您甚至可能只有一种设计适用于所有视口纵横比/尺寸。为了得到响应，尽可能使用不固定的相对单位，如 px。
实际上我正在做一个包含很多屏幕的电视项目，我正在使用网格来完美地排列它们并使其具有响应性，因此每行的屏幕数量是合适的，并且每个屏幕也有它的控制面板，是的，谢谢你提醒我在所有项目中都使用 rem & em

标签： css responsive-design frontend media-queries

【解决方案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 */
}

【讨论】：