gpt4 book ai didi

html - 获得正确的媒体查询以覆盖此宽度的电话、表格和常规屏幕

转载 作者:行者123 更新时间:2023-11-28 13:31:38 25 4
gpt4 key购买 nike

我正在做一个元素,我们没有做响应式设计和使用媒体查询。现在我读了Adaptive Web Design作者:亚伦·古斯塔夫森,Responsive Web Design with HTML5 and CSS3 by Ben Frain和其他在线网站。这是一回事,但我仍然有点不确定我是怎么做的,那就是我选择的宽度的媒体查询。

我们决定采用 Twitter bootstrap 风格(虽然没有使用它),它会卡入到位而不是让它流畅。

三种类型
手机 - 尺寸?
平板电脑 - 980px(横向和纵向
屏幕 - 1160px

我的问题是我应该使用什么媒体查询来覆盖它?我真的很感谢帮助,这对我来说是最困难的部分之一。

最佳答案

LESS frameworkTwitter Bootstrap两者都采用有趣的方法。

LESS 框架针对 4 种模式:

  • 大 - 992px w +
  • 平板电脑 - 768px w
  • 手机 1 - 480 像素 w
  • 手机 2 - 320 像素 w

Twitter Bootstrap 的目标是五个:

  • 大 - 1200px w +
  • 大 - 980 像素 w
  • 平板电脑 - 768px w
  • 手机 1 - 480-767 像素 w
  • 手机 2 - < 480px w

我建议使用其中一个(或另一个)响应式 CSS 框架和/或 LESS/SASS 来实现您想要做的事情。

关于html - 获得正确的媒体查询以覆盖此宽度的电话、表格和常规屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11429568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com