我想制作一个移动响应式电子邮件压缩页面。到目前为止，我有以下代码:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Dg Ebook</h2>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="email" type="text" placeholder="Enter Your Best Email">
</div>
</div>
<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Send me The FREE eBook on Email</button>
</form>
</body>
</html>这将使我的页面具有响应性，但在桌面计算机上，它还会将表单缩放到屏幕边缘。我希望桌面 View 以固定宽度在屏幕中间显示表单，当移动/平板设备查看页面时，我希望将表单缩放到屏幕边缘。
我该怎么做？
我使用 w3.css
最佳答案
在您的 CSS 中使用 @media 屏幕。
@media screen and (max-width: 990px) /* For screen below 990px */
CSS here...
@media screen and (max-width: 1200px) /* For screen below 1200px */
CSS here...
@media screen and (min/max size) /* @media(CSS rule) screen(Media Type) and(&) */
使用@media 的原因是定义您的CSS 样式以匹配屏幕 尺寸。因此，使其响应。在此处了解更多信息:@media
您可能需要覆盖一些 w3.css 规则。
关于html - 如何让我的登陆页面对桌面/移动访问者有不同的规则？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49300227/