时间戳

首页 > 解决方案 > 如何修复我的媒体查询对移动设备显示没有响应（跨所有平台）？

html - 如何修复我的媒体查询对移动设备显示没有响应（跨所有平台）？

问题描述

这是一个家庭作业。我需要为我已经制作的网站获取现有代码，并使其与移动设备查看兼容。他们希望我通过添加响应式设计元素来做到这一点。目前，桌面网站是两栏格式。对于移动显示，应该将网站转换为单列格式。当我用手机打开我的网站时，网站仍然显示为两列布局。

我已经使用 CSS 和 HTML 验证器检查了所有内容。未检测到错误。我一步一步地按照书中的说明进行操作，并且必须包含他们告诉我要包含的所有内容，但由于某种原因，它仍然无法在移动设备上正确显示。（我还测试了问题是否仅是 iPhone 或 android 问题。两种设备都无法正确显示网站）。

第一个代码示例是 HTML 代码，用于显示我确实在头部使用了元标记。第二个代码示例是我的具有媒体查询的外部 CSS。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Fish Creek Animal Clinic </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="fishcreek.css">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1> Fish Creek Animal Clinic </h1>
            </header>
            <nav>
            <ul>
                <li><a href="index.html"> Home</a></li>
                <li><a href="services.html"> Services</a></li>
                <li><a href="askvet.html"> Ask The Vet</a></li>
                <li><a href="contact.html"> Contact</a></li>
            </ul>
            </nav>
            <main>
                <dl>
                    <dt>Full Service Facility</dt>
                    <dd>Doctors and staff are on duty 24 hours a day, 7 days a week.<dd>
                    <dt>Years of Experience</dt>
                    <dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</dd>
                    <dt>Open Door Policy</dt>
                    <dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd>
                </dl>
                <div>
                    <a id="mobile" href="tel:800-555-5555">800-555-5555</a><br> 
                    <span id="desktop">800-555-5555</span><br>
                    1242 Grassy Lane<br>
                    Fish Creek, WI 55534<br><br>
                </div>
            </main>
            <footer>
                Copyright &copy; 2018 Fish Creek Animal Clinic. All Rights Reserved.<br>
                <a href="mailto:jescobedo3@saddleback.edu"> jescobedo3@saddleback.edu </a>
            </footer>
        </div>
    </body>
</html>

@media only screen and (max-width: 1024px) {
    body {margin: 0;
        padding: 0;
        background-color: white;
        background-image: none;
    }

    #wrapper {
        width: auto;
        min-width: 0;
        margin: 0;
    }

    h1 {
        margin: 0;
        font-size: 1.8em;
        line-height: 200%;
    }

    nav {
        float: none;
        padding: 0;
        width: auto;
    }

    nav li {display: inline-block;}

    nav a {
        padding: 1em;
        font-size: 1.2em;
    }

    nav ul {
        text-align: center;
        padding: 0;
        margin: 0;
    }

    main {
        font-size: 90%;
        margin: 0;
        padding-left: 2em;
    }

    footer {margin: 0;}
}

@media only screen and (max-width: 768px) {
    header {background-image: url(lilfish.gif)}

    h1 {
        font-size: 1.5em;
        line-height: 120%;
    }

    nav a {
        display: block;
        padding: 0.2em;
        font-size: 1em;
        border-bottom: 1px solid #330000;
    }

    nav li {display: block;}

    nav ul {text-align: left;}

    main {padding-left: 1em;}

    .category {text-shadow: none;}

    #mobile {display: inline;}

    #desktop {display: none;}
}

标签： htmlcss

解决方案

我认为您可以使用不同大小的媒体查询，也可以根据设备方向使用。

<style>
     /* For Device Size */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  

   /* Your CSS Code for this device size */    

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {  

   /* Your CSS Code for this device size */    

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {  

   /* Your CSS Code for this device size */    

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {  

   /* Your CSS Code for this device size */    

}      

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

   /* Your CSS Code for this device size */ 

}

     /* For Device Orientation */
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {   

   /* Your CSS Code for this device orientation */    

}

</style>

推荐阅读