根据屏幕尺寸更改布局 [英] Change layout based on screen size

问题描述

我希望我的网站标题的内容在常规​​尺寸的台式机/笔记本电脑上占据屏幕宽度的100％，但要以较大的显示器为中心.我所说的更大的显示器"也是指显示器的实际尺寸，而不仅仅是分辨率.我希望在15英寸笔记本电脑和23英寸台式机(均具有1920x1080的相同分辨率)上，显示器有所不同.在23英寸的显示屏上显示如此宽的菜单效果不佳，因为那里有宽阔的空白部分.

I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By "larger displays", I'm referring to the actual size of the display too, not just the resolution. On my 15" laptop and my 23" desktop (both having the same resolution of 1920x1080), I would like the displays to be different. Having such a wide menu on a 23" display doesn't look good as there are wide empty parts.

我当前正在使用 .container BootStrap类作为标题的内容，并且我重写了媒体查询，以便当屏幕宽度超过1200px时，容器的宽度为100％.再次，这不是我真正想要的:

I'm currently using a .container BootStrap class for the contents of the header, and I overrided a media query so that the container has a width of 100% when the screen width exceeds 1200px. Again, this isn't really what I want :

• 如果屏幕宽度超过1200像素，则标题宽度应为100％
• 如果屏幕宽度超过1920像素，则标题宽度应为默认宽度，并且标题应居中
• 如果屏幕宽度超过1200像素，并且屏幕本身很大(大于19英寸)，则标题宽度应为默认宽度，并且标题应居中.

我不确定这是否是最好的方法，但是我愿意接受所有建议.

I'm not sure if that's the best approach, but I'm open to all suggestions.

谢谢

推荐答案

我的解决方案是使用这允许编写类似

@media screen and (max-resolution: 116dpi){

116dpi是分辨率为1920x1080的19英寸屏幕的DPI.如果屏幕变大，例如具有相同分辨率的23英寸，像素密度会降低，那么我们的分辨率将低于116dpi.

116dpi is the DPI of a 19" screen with a resolution of 1920x1080. If the screen gets larger, say 23" with the same resolution, pixel density gets lower, then we have something below 116dpi.

这篇关于根据屏幕尺寸更改布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！