带有媒体查询的响应式设计:屏幕尺寸? [英] Responsive design with media query : screen size?

问题描述

我正在使用媒体查询开发响应式设计的网站.但我不知道如何设置一个好的宽度.

正如您在此表中所见，即使对于单一类型的设备，也有很多不同的分辨率.而且随着移动设备上的分辨率越来越大，很难知道要为特定分辨率应用什么设计.

现在，我正在使用这个:

移动优先

@media 屏幕和 (min-width:720px) => Phablet

@media 屏幕和 (min-width:768px) => 平板电脑

@media 屏幕和 (min-width:1024px) => 桌面

感谢您的任何建议或推荐！

解决方案

响应式网页设计 (RWD) 是一种网页设计方法，旨在打造网站以提供最佳观看体验

在设计响应式网站时，您应该考虑屏幕的大小而不是设备类型.媒体查询可帮助您做到这一点.

如果您想为每个设备设置样式，您可以使用 user agent 值，但不建议这样做，因为您必须努力维护新设备的代码，新的浏览器、浏览器版本等，而在使用屏幕尺寸时，所有这些都无关紧要.

您可以在在此链接中看到一些标准分辨率.>

但是，在我看来，您应该首先设计您的网站布局，然后才使用媒体查询对其进行调整以适应可能的屏幕尺寸.

为什么?正如我之前所说，屏幕分辨率的变化很大，如果您要设计一个以 320 像素为目标的移动版本，您的网站将不会针对 350 像素或 400 像素屏幕进行优化.

提示

1. 设计响应式页面时，在桌面浏览器中打开它并更改浏览器的宽度，看看屏幕的宽度如何影响您的布局和样式.
2. 使用百分比而不是像素，它会让您的工作更轻松.

示例

我有一个有 5 列的表格.当屏幕尺寸大于 600 像素时，数据看起来不错，因此我在 600 像素处添加一个断点，并在屏幕尺寸较小时隐藏 1 个不太重要的列.台式机、平板等大屏设备会显示所有数据，而小屏手机会显示部分数据.

<小时>

心态

与问题没有直接关系，但在响应式设计中很重要.响应式设计还与用户在使用手机或台式机时具有不同的心态有关.例如，当您在晚上打开银行网站并查看您的股票时，您希望屏幕上显示尽可能多的数据.当您在午休时间打开同一页面时，您可能只想看到一些重要的细节，而不是去年的所有图表.

I'm working on responsive designed web site using media queries. But i do not know how to take a good width set.

As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution.

For now, I'm using this :

Mobile First

@media screen and (min-width:720px) => Phablet

@media screen and (min-width:768px) => Tablet

@media screen and (min-width:1024px) => Desktop

Thank you for any advice or recomendations !

解决方案

Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience

When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.

If you want to style your site per device, you can use the user agent value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.

You can see some standard resolutions in this link.

BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.

Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.

TIPS

1. When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.
2. Use percentage instead of pixels, it will make your work easier.

Example

I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.

---

State of mind

Not directly related to the question but important aspect in responsive design. Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.

这篇关于带有媒体查询的响应式设计:屏幕尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！