【译】怎样编写移动优先的CSS

前端开发作者： 2024-08-25 22:25:02

原文：How To Write Mobile-first CSS 作者：译者：huansky 构建响应式网站是今天前端开发人员必备的技能。当我们谈论响应式网站时，移动优先这个词立刻就会浮现。我们

// This applies from 0px to 600px
body {
  background: red;
}

// This applies from 600px onwards
@media (min-width: 600px) {
  body {
    background: green;
  }
}

// This applies from 600px onwards
body { green;
}

// This applies from 0px to 600px
@media (max-width: 600px) { red;
  }
}

.content {
  // Properties for smaller screens.
  // Nothing is required here because we can use the default styles

  // Properties for larger screens
  @media (min-width: 800px) {
    float: left;
    width: 60%;
  }
}


  // Properties for larger screens.
  float: left;
  width: 60%;

  // Properties for smaller screens.
  // Note that we have to write two default properties to make the layout work
  @media (max-width: 800px) {
    float: none; 100%;
  }
}

.gallery__item {
  float: 33.33%;
  @media (min-width: 800px) {
    width: 25%;
  }
}

 30%;
  margin-right 5%;
  margin-bottom: 5%;
}

 5%;
  &:nth-child(3n) {
    margin-right: 0;
  }
}



  @media (min-width: 800px) { 21.25%; // (100% - 15%) / 4
    &:nth-child (4n) {
      margin-right: 0;
    }
  }
}


  // ...
  @media (min-width: 800px) {
    // ...
    &:nth-child (3n) {
      margin-right: 5%;
    }
    &:nth-child(4n) {
      margin-right: 0%;
    }
  }
}


  margin-right:
  margin-bottom:
  @media (max-width: 800px) {
    width: 30%;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  @media (min-width: 800px) {
  }
}



    &:
  }

  // combining both min-width and max-width queries
  @media (min-width: 800px) and (max-width: 1200px) {
  }

  @media (min-width: 1200px){ 16%; // (100% - 20%) / 5
    &:nth-child (5n) {
      margin-right: 0;
    }
  }
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68632.html

相关资讯：【译】怎样编写移动优先的CSS