想让我的网站具有移动响应能力

Question

我尝试过使用@media 查询，但我的桌面版本看起来仍然像移动视图。 有没有办法通过引导程序修复它？

//移动端查看

.main-head{
    position:relative ;
}
.home-logo-wrapper{
    height: 20px;
    width: 45px;
    border-width: 1px;
    position:absolute;
}

.home-logo-img{
    width:100px;
    padding:20px;
    position: absolute; 
    top: -80px; 
}

//用于桌面视图

@media only screen and (min-width: 1000px) {
    *{
        margin:0;
    }
    .main-head{
        position:relative ;
    }
    .home-logo-wrapper{
        height: 20px;
        width: 45px;
        border-width: 1px;
        position:absolute;
    }

    .home-logo-img{
        width:100px;
        padding:20px;
        position: absolute; 
        top: -80px; 
    }

我希望我的桌面版本和移动版本不同！

Answer 1

Bootstrap 是设计响应式网站的不错选择。在那个网格系统中很重要。您尝试了解如何使用网格系统使网站具有响应性。 以下链接将帮助您学习引导程序。

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

此外，有时我们需要使用引导程序进行媒体查询。有时，如果我们在所有设备视图（如桌面、选项卡、移动设备）上使用相同样式的字体、填充、边距等，它看起来并不好。因此，通过使用媒体查询，您可以为不同的设备编写不同的样式，在所有类型的设备上看起来都不错。

以下媒体查询将对您的网站有所帮助。

<style>

 /* 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 */ 

 }

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

    /* Your CSS Code for this device orientation */    

 }

Answer 2

桌面视图不一定是 1000 像素及以上。我会尝试将您的媒体查询更改为最小宽度 320px，然后从那里向上工作。 （320px是使用google chrome开发者工具开发时iphone 5和SE屏幕的宽度）

@media only screen and (min-width: 320px) {
    *{
        margin:0;
    }
    .main-head{
        position:relative ;
    }
    .home-logo-wrapper{
        height: 20px;
        width: 45px;
        border-width: 1px;
        position:absolute;
    }

    .home-logo-img{
        width:100px;
        padding:20px;
        position: absolute; 
        top: -80px; 
    }

您还可以使用引导 css 进行响应式设计。就像您问的那样，通过一些设置有点“自动执行”。

Answer 3

    //you can write all mobile related css to media less than 767 so use max-width:767px in media for mobile view


    // write desktop related css here



    // for mobile view

    @media only screen and (max-width: 767px) {        
        .main-head{
            position:relative ;
        }
        .home-logo-wrapper{
            height: 20px;
            width: 45px;
            border-width: 1px;
            position:absolute;
        }

        .home-logo-img{
            width:100px;
            padding:20px;
            position: absolute; 
            top: -80px; 
        }
   }

请参考以下链接了解更多详情： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 4

您使用@media 查询的想法是正确的，但桌面绝不是 1000px ，您无法实际了解其他人的桌面大小，您应该使用覆盖范围的查询。例如，我使用这个：

.my_class{/*it will always be active*/}

/* Small (sm) */
@media (min-width: 640px) { /* it will be active in 640px and bigger*/ }

/* Medium (md) */
@media (min-width: 768px) { /*it  will be active in 768px and bigger */ }

/* Large (lg) */
@media (min-width: 1024px) { /*it  will be active in 1024px and bigger */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /*it will be active in 1280px and bigger */ }

您还可以使用最大宽度来创建更坚实的范围

@media (min-width: 576px) and (max-width: 767.98px) { 
/* it will only be active when the screen is bigger that 576px 
and smaller than 767.98px */ }