使用媒体查询创建响应式程序的问题 [英] Issue with creating a responsive program with media queries
问题描述
我正在尝试创建一个简单的响应式程序，它将根据屏幕大小更改文本.
I'm trying to create a simple responsive program, that will change the text depending on the screen size.
我创建了 2 个应该显示的 div 标签，一个用于 PC 用户，另一个用于移动设备，对于后者，我将其设置为 visibility: hidden; 所以它不会显示，除非你的屏幕尺寸足够小，然后我创建了媒体查询并复制并粘贴了我想用于名为 Mobile 的移动用户的 div，在媒体查询中.
I created 2 div tags that should show up, one is for people who are on PC and another one on mobile, for the latter I have set it to visibility: hidden; so it won't show unless you are on a small enough screen size, then I created media query and copy and pasted the div I wanted to use for mobile users named Mobile, inside the media query.
我只删除了 visibility: hidden; 标签所以它显示了，但它不起作用然后屏幕变小了文本没有改变，有人可以帮忙吗?
I only removed the visibility: hidden; tag so it shows, but it's not working then the screen is smaller the text doesn't change, can anyone help?
body {}
@media (max-width: 320px) {
.Mobile {
font-family: Roboto;
font-size: 100px;
text-shadow: 2px 1px 2px gray;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.PC {
font-family: Roboto;
font-size: 100px;
text-shadow: 2px 1px 2px gray;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.Mobile {
font-family: Roboto;
font-size: 100px;
text-shadow: 2px 1px 2px gray;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
visibility: hidden;
}<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<p class="PC"><strong>PC</strong></p>
<p class="Mobile"><strong>Mobile</strong></p>
</body>
</html>推荐答案
几个问题:
- 您应该使用
meta viewport标签. - 在您的媒体查询中，您永远不会将元素设置为显示或更改可见性.CSS 会读取您的所有样式，因此您需要实际更改属性.
在下面的示例中，您会看到我在两个元素上都设置了 display 属性 - media_query
In the example below, you see I set the display property on both of your elements - inside and outside of the media_query
.PC {
font-family: Roboto;
font-size: 100px;
text-shadow: 2px 1px 2px gray;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
}
.Mobile {
font-family: Roboto;
font-size: 100px;
text-shadow: 2px 1px 2px gray;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: none;
}
@media (max-width: 620px) {
.Mobile {
display: block;
}
.PC {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<p class="PC"><strong>PC</strong></p>
<p class="Mobile"><strong>Mobile</strong></p>
</body>
</html>这篇关于使用媒体查询创建响应式程序的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
