Question

CSS源代码，使我的网站移动友好。我拥有的那个与我的所有网站内容都不兼容

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left, header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

    #login ul {
        margin: 5px 0;
        padding: 0;
    }

    #login li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 1px;
    }

    #login a {
        background: none;
        color: #999;
        font-weight: 600;
        margin: 2px;
        padding: 0;
    }

    #login a:hover {
        color: #333;
    }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

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

    ul#menu li {
        margin: 0;
        padding: 0;
    }


    /* main layout
    ----------------------------------------------------------*/
    .main-content, .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

    ol.round li {
        padding-left: 10px;
        margin: 25px 0;
    }

    ol.round li.zero, ol.round li.one, ol.round li.two, ol.round li.three,      ol.round li.four, ol.round li.five, ol.round li.six, ol.round li.seven, ol.round     li.eight, ol.round li.nine {
        background: none;
    }

    /* features */
    section.feature {
        float: none;
        padding: 10px;
        width: auto;
    }

    section.feature img {
        color: #999;
        content: attr(alt);
        font-size: 1.5em;
        font-weight: 600;
    }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left, footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

    footer p {
        margin: 0;
    }

    #search {
        width: auto;
    }

    #main{
    width: auto;
    }


    }

HTML代码

   <body style="background-color: #e2e2e2" >

特别是“搜索”和“主要”类有问题。它们不能很好地适应移动视图的宽度

      <label for="name"> &nbsp Looking For Something?</label>  
 <input type="text" id="search" name="search" value="@search" />&nbsp 
 <input type="submit" value="Go" />

 </form>
 </div>
<p>&nbsp</p>

@foreach(var info in data)
{    
    var name=   @info.Name;

<div class="main">

<div class="proimage">  
  <img src="@info.ProImage" height="100px" width="100px" alt="image">
   </div>


    <ul class="contact">&nbsp &nbsp <a href="~/Account/User">@name</a></ul>

    <ul class="contact"> &nbsp &nbsp Posted:@info.Date</ul>
   <p>&nbsp &nbsp</p>
    <ul class="description"> &nbsp</ul>
    <ul class="description">@info.Description</ul>
    <div class="itemimage">
        <img src="@info.ItemImage" height="300px" width="390px"                        
alt="image">&nbsp


    </div>

</div>

}

Answer 1

只需像这样使用

@media (min-width: 850px) {

   footer .float-left, footer .float-right {
        float: none;
   }
   ...
}

Answer 2

对于特定宽度，您可以这样使用

@media screen and (max-width: 580px) {
        footer .float-left, footer .float-right {
            ....
       }
}

对于特定宽度

@media screen and (min-width: 500px) and (max-width: 674px) {
    footer .float-left, footer .float-right {
     ....
    }
}

移动友好网站的CSS代码

2 个答案: