响应性- 如何使用 CSS 控制 PC 显示的比例和布局？

Posted 2023-03-06

【中文标题】响应性- 如何使用 CSS 控制 PC 显示的比例和布局？

【英文标题】：Responsiveness- How to control PC display's scale and layout with CSS?

【发布时间】：2019-05-19 17:31:52

【问题描述】：

到目前为止，当我尝试创建响应式网站时，我一直使用媒体查询来控制屏幕分辨率。然而，虽然大多数 PC 屏幕的比例为 100%，但许多笔记本电脑的比例为 125% 甚至 150%。有没有什么办法可以添加只指定给 150% 比例显示的 CSS 属性？

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【参考方案1】：

您可能可以使用一些 JS 来做到这一点，但它可能需要大量的自定义边缘案例编码。另一种方法是使用viewport 单位。这样，无论分辨率大小，您都可以确保所有用户都能获得相同的体验。

查看这个 codepen 示例并调整屏幕大小/更改显示以了解我的意思

https://codepen.io/oneezy/pen/oJYoEG

*  margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto"; 

/* Styles
***************************/
header  background: black; color: white; display: flex; align-items: center; 
p  opacity: .78; 




/*==============================================                                           
  ####    #####  ##   ##  ##   ####  #####  
  ##  ##  ##     ##   ##  ##  ##     ##     
  ##  ##  #####  ##   ##  ##  ##     #####  
  ##  ##  ##      ## ##   ##  ##     ##     
  ####    #####    ###    ##   ####  #####  
==============================================*/

/* Mobile */
@media (min-width: 0) and (max-width: 768px)  

	h1  font-size: 9vw; padding: 2vh 0; 
	h2  font-size: 7vw; 
	p   font-size: 4vw; 

  
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px)  

	h1  font-size: 7vw; padding: 2vh 0; 
	h2  font-size: 5vw; 
	p   font-size: 3vw; 

  
/* Desktop */
@media (min-width: 1025px)  

	h1  font-size: 6vw; padding: 2vh 0; 
	h2  font-size: 4vw; 
	p   font-size: 2vw; 

<header>
	<h1>Heading</h1>
</header>

<main>
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
	
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
	
	<article>
		<h2>Title</h2>
		<p>I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. I'm a paragraph. </p>
	</article>
</main>

【参考方案2】：

在浏览器中没有通过代码控制缩放级别的选项，但是移动设备可以通过使用下面的元标记来限制缩放选项。

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【参考方案3】：

使用这个元数据。

<!–– 150% scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.5"/>