Question

我在这里只是想问一个简单的问题..我正在尝试使用CSS媒体查询以使我当前的网站与移动设备兼容，但是我输入的所有内容似乎没有任何区别？我现在真的不熟悉CSS了。

这是我的HTML

<html>

<head>

<!--<link href="styles.css" rel="stylesheet" type="text/css">-->

</head>
<title>Cochranes Law Firm</title>
<body>

    <div id="wrapper">
        <div id="header">
            <img src="images/logo.png">
            <div id="nav">

                <div id="Search">
                    <input type="text" name="Search"> <img
                        src="images/search.png" class="mag">
                </div>
                <ul>
                    <li class="Home"><a href="#">Home </a></li>
                    <li class="About"><a href="#">About Us </a></li>
                    <li class="Team"><a href="#">Our team </a></li>
                    <li class="Services"><a href="#">Our Services </a></li>
                    <li class="last"><a href="#"> Contact Us </a></li>
                </ul>
            </div>
        </div>

        <div id="headings">
            <h1>
                Local <span style="color: eb332c; font-weight: bold">Billingham</span>
                Solicitors Firm
            </h1>
            <img src="images/family.jpg" class="family"> <img
                src="images/home.jpg" class="home"> <img src="images/care.jpg"
                class="care">

            <h2>Family Law</h2>
            <h3>Buying & Selling Property</h3>
            <h4>Wills, Trusts & Probate</h4>


        </div>

        <div id="content">
            <div id="bottomleft">
                <h5>Welcome to Cochranes Law Firm</h5>
                <p class="para">We are a family High Street Practice, in
                    Billingham Town Centre, providing an important service to the local
                    community. we are wills and probate. buying and Selling, as well as
                    Family law Solicitors in the Billingham and Stockton-on-tees area.
                    If you would like any further information please feel free to
                    contact us by phone, email or our contact form.</p>
                <p class="lorem">Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit
                    ante placerat orci, et porttitor nunc velit malesuada tortor. Nam
                    ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit
                    amet nulla ornare fringilla sodales vel justo. Cras hendrerit
                    libero a mauris gravida lobortis. Donec iaculis tincidunt est, non
                    rutrum lorem dictum vitae. Curabitur non justo sed est accumsan
                    posuere id eget justo. Nunc in justo congue, laoreet sem sed,
                    scelerisque nulla. Fusce in urna suscipit, imperdiet purus et,
                    ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus
                    placerat aliquet.</p>


            </div>
            <div id="bottomright">
                <h6 class="address">Contact Address</h6>
                <p class="pclass">
                    Cochranes Law Firm <br> 67 Queensway<br> Billingham<br>TS23
                    2KH
                </p>
                <h6 class="commonnum">Contact Numbers</h6>
                <p class="nums">
                    Telephone: 01642 266800<br>Fax:01642 366809<br> DX 63160
                    BILLINGHAM
                </p>
                <p class="Email">info@cochraneslawfirm.co.uk</p>
                <h6 class="contactmail">Contact E-Mail Address</h6>


            </div>


        </div>
    </div>

    <div id="footer">
        <div id="footer_content">

            <p class="foot">
                &copy;2014 Cochranes Law Firm | Privacy Policy | Terms and
                Conditions<br> Web Design by IT Solutions.
            </p>
            <img src="images/ware.png"> <img
                src="images/accreditations.png" class="accreditations"> <small><br>
            <br>Cochranes Law Firm is a Limited Liability registered in
                England and Wales number OC343046 and our VAT number is 508 983002.
                The registered office is at 67 Queensway, Billingham. TS23 2LU.
                Authorised and regulated by the Solicitors Regulation authority
                number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct.
                We have worldwide professional indemnity insurance through amtrust
                Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB.
                Our policy number is P13A298125P and P13B295219P. </small>
        </div>
    </div>



</body>
</html>

这是我的CSS

<style>
* {
        font: 12px arial;
        padding: 0px;
        margin: 0px;
    }

    #wrapper {
        margin: 0 auto;
        width: 1130px;
    }

    #header {
        position: relative;
        height: 100px;
        width: 1130px;
    }

    #header img {
        position: absolute;
        top: 10px;
    }

    #nav {
        position: absolute;
        right: 0px;
    }

    #nav ul {
        padding: 5px;
        border-left: 1px;
        text-align: center;
        width: 600px;
    }

    #nav li {
        float: left;
        display: block;
        padding: 8px 15px;
        border-right: 2px solid #eb332c;
        position: relative;
        top: 30px;
    }

    #nav li a:hover {
        color: #c00;
        background-color: #fff;
    }

    #nav li.last {
        border-right: none;
    }

    #nav li a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        color: 000000;
    }

    #headings {
        position: relative;
        height: 400px;
        width: 835px;
        margin: 0px auto;
    }

    #headings img {
        display: inline;
        background-color: #ebebeb;
        padding: 150px 0px 50px 0px;
    }

    #content {
        width: 750px;
        margin: 0px auto;
    }

    #bottomleft {
        float: left;
        width: 400px;
    }

    #bottomright {
        float: right;
        width: 300px;
        position: relative;
        left: 18px;
    }

    #footer {
        background-color: #eb322c;
        width: 100%;
        height: 140px;
        clear: both;
    }

    #footer_content {
        width: 1130px;
        background-color: eb332c;
        margin: 0px auto;
        height: 140px;
        position: relative;
        color: white;
    }

    h1 {
        background-color: #FFFFFF;
        text-align: left;
        font-size: 30px;
        position: absolute;
        top: 60px;
        left: 0px;
        z-index: 100;
        width: 340px;
    }

    h2 {
        font-size: 20px;
        position: absolute;
        bottom: 20px;
    }

    h3 {
        font-size: 20px;
        position: absolute;
        bottom: 22px;
        position: absolute;
        right: 343px;
    }

    h4 {
        font-size: 20px;
        position: absolute;
        bottom: 20px;
        position: absolute;
        right: 90px;
    }

    h5 {
        font-size: 18px;
        border-bottom: 1px solid #eb332c;
        position: relative;
        right: 45px;
    }

    p.para {
        font-family: arial;
        font-size: 12px;
        position: relative;
        right: 45px;
    }

    #bottomleft {
        position: relative;
    }

    #bottomright {
        position: relative;
        background-color: ebebeb;
        width: 268px;
        height: 220px;
    }

    h6.address {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    h6.contactmail {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    h6.commonnum {
        border-bottom: 1px solid #eb332c;
        width: 230px;
        font-size: 16px;
    }

    p.email {
        position: relative;
        top: 34px;
    }

    #search {
        position: absolute;
        left: 340px;
        top: 12px;
        width: 320px;
    }

    #search img {
        margin-top: -9px;
        margin-left: 5px;
    }

    img.accreditations {
        float: right;
    }

    small {
        font-size: x-small;
    }

    p.lorem {
        position: relative;
        right: 45px;
    }

    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--
    Displays between 768px and 1024px-->
    @media only screen and (min-device-width : 768px) and (max-device-width
        :1024px) {
        #header,#footer_content,#text {
            padding: 0px 5px;
            width: 50%;
            box-sizing: border-box;
        }
    }

</style>

需要注意的是，我在我的风格中使用了我的元标记，任何帮助都会受到赞赏....谢谢......

Answer 1

1。）您正在使用定位设备（手机，平板电脑）的min-device-width和max-device-width。

相反，请使用min-width和max-width。

这与

结合使用

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

应该足够了。

2。） <meta>标记内有<style>标记 - 它必须在外面。在开头<style>标记上方尝试。

3。） CSS评论为/* comment */而不是。

更改这三件事，您的代码应该有效。

See this fiddle

Answer 2

你的CSS应该是这样的

@media only screen and (min-device-width: 400px) and (max-device-width: 1280px) {




               /* css for this resolution */


}

@media only screen and (min-device-width: 1281px) and (max-device-width: 1440px) {




               /* css for this resolution */


}

Answer 3

您应该将meta - 代码移到style - 代码之外。

这一行：

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

<强>更新

确保您的媒体查询在一行中：

@media only screen and (min-width : 768px) and (max-width : 1024px) {

}

Demo

CSS媒体查询不起作用，我输入的所有内容都不起作用？

3 个答案: