Css 最流行的断点是为什么设计的?
在一个大型内容项目上做一些前期研究。我个人喜欢参考流行的框架,看看它们支持什么。例如,Zurb的基金会使用以下断点(并且是移动的第一,一些要考虑的…): 或者,您可以查看Bootstrap正在做什么(同样,“移动优先”) 我喜欢认为,随着新设备的问世(iphone6/6plus),这些框架将在收到用户反馈时得到更新 希望这有帮助Css 最流行的断点是为什么设计的?,css,responsive-design,media-queries,Css,Responsive Design,Media Queries,在一个大型内容项目上做一些前期研究。我个人喜欢参考流行的框架,看看它们支持什么。例如,Zurb的基金会使用以下断点(并且是移动的第一,一些要考虑的…): 或者,您可以查看Bootstrap正在做什么(同样,“移动优先”) 我喜欢认为,随着新设备的问世(iphone6/6plus),这些框架将在收到用户反馈时得到更新 希望这有帮助 // Small screens @media only screen { } /* Define mobile styles */ @media only sc
// Small screens
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }