媒体查询功能部分不显示全宽
[英]Media Queries Feature section doesn't show full width
问题描述
I am trying to create this media query so that when you open it on a mobile device it has the 3 ".feature-box"'s one on top of the other at full width, however it does not work they just stay as full width?
我正在尝试创建此媒体查询，以便当您在移动设备上打开它时，它具有 3 个“.feature-box”的全宽，一个在另一个顶部，但是它不起作用，它们只是保持完整宽度？ Any idea how to fix this?知道如何解决这个问题吗？ Code below下面的代码
HTML HTML
<section>
<div class="section-header">
<h2>Services</h2>
<p>I provide, clean responsive modern websites for you or your business.</p>
</div>
<div class="feature-box">
<img src="devices.svg" alt="">
<h3>Responsive</h3>
<p>Works well on any device.</p>
</div>
<div class="feature-box">
<img src="code.svg" alt="">
<h3>Clean Code</h3>
<p>Effieciently typed and easy to read.</p>
</div>
<div class="feature-box">
<img src="clock.svg" alt="">
<h3>Fast Loading</h3>
<p>Loads fast to ensure your customers stay.</p>
</div>
</section>
CSS CSS
/* Site Section */
section {
padding: 50px 0;
margin: 0 auto;
width: 80%; }
section .section-header {
text-align: center;
margin: 0 0 30px 0; }
section .section-header h2 {
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 300;
color: #3F464D; }
section .feature-box {
display: inline-block;
width: 33%;
padding: 20px 30px;
text-align: center; }
section .feature-box img {
width: 150px;
margin: 0 0 12px 0;
line-height: 1; }
section .feature-box p {
font-size: 1.5rem; }
Media Query媒体查询
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
/* Features */
.feature-box {
width: 100%;
display: block; } }
2 个解决方案
解决方案1
1 已采纳 2020-02-24 16:56:18
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
/* Features */
section .feature-box {
width: 100%;
display: block; } }
Your selector inside your media query is the problem.您的媒体查询中的选择器是问题所在。 Its should be at least equal specificity so you need the 'section'.它应该至少具有相同的特异性，因此您需要“部分”。
section .feature-box{ width: 33% }
is more specific than:比以下更具体：
.feature-box{ width: 100% }
and its overriding it.并覆盖它。
解决方案2
0 2020-02-24 17:12:48
Source: https://www.sitepoint.com/media-queries-width-vs-device-width/来源： https : //www.sitepoint.com/media-queries-width-vs-device-width/
First, as with getting all websites to become responsive and adhere to media queries, the viewport meta tag must be placed in the
<head>section of your web page.<head>部分。 The basic standard version of this is shown below.
<meta name="viewport" content="width=device-width,initial-scale=1">
Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.