Question

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

Answer 1

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

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

Answer 2

使用此元。

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

Answer 3

您可能可以使用一些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>

响应性-如何使用CSS控制PC显示器的尺寸和布局？

3 个答案: