我如何使我的网站可以在任何设备上缩放's屏幕



我尝试了html元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但它没有起作用。请告诉我答案如何使我的网站响应

要使您的网站做出响应,您可以手动将任何页面宽度元素的宽度设置为100%,例如主<div>,然后避免出现任何水平滚动条。或者简单地使用响应库,如Bootstrap 4.0。

要使用引导程序库,请在<head>部分中放入以下行:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

然后在正文中放入您的页面:

<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Your Page HTML Here -->
</div>
</div>
</div>
</body>

有关更多信息和学习Bootstrap 4并了解其工作原理,请访问他们的官方网站:https://getbootstrap.com/docs/4.0/getting-started/introduction/

您会发现其他响应组件,例如:菜单、选项卡、按钮、表单控件等等。此外,您还将学习如何根据主要屏幕宽度和弹出窗口的屏幕宽度隐藏和显示元素;称为模态";以及在您的网站中使用的其他综合元素,以保持响应能力。

试试这个:

<meta name="viewport" content="user-scalable=yes">

你可以用多种方法来实现这一点,但如果你只使用HTML和CSS,你可以使用CSS媒体查询。您可以从这里了解更多信息:响应式网页设计-媒体查询

您必须使用CSS中的媒体查询才能做到这一点。

像这样:

@media only screen and (min-width:360px){
}

这是一个关于响应式网页设计的YouTube视频,非常容易理解:mmtuts 的响应式网页

最新更新