响应式设计像素与百分比

2024-02-25

我希望有人能提供帮助。

我最近在一个知名网站上观看了有关响应式网页设计的视频。

我对导师采取的方法感到困惑。他基本上创建了三个样式表(大/中/小),在每个样式表中,他给出了 DIVS 的 PX 宽度,并在必要时交换图像。

当然,这种方法是有缺陷的,他可以只使用百分比进行流体布局,而不是通过媒体查询调用不同的样式表?

他的方法有什么优点吗?

非常感谢,


灵活设计和响应式设计之间存在区别。

根据我读过的一些书籍,您可以通过使用%长度来使布局灵活 值,因此布局会适应视口宽度的精确尺寸。

如果您使用媒体查询构建响应式设计,则可以使用 绝对长度(像素)并调整这些硬编码值以根据 媒体查询中定义的屏幕尺寸限制。

因此,灵活的设计可能与响应式设计一样有效,而响应式设计也可能 基于固定宽度布局。

不用说,您使用的方法将取决于您想要的设计 构建以及它如何在各种设备中工作。

你的教程的作者不一定是错的,但他们的方法可能不正确 构建响应式设计的最有效方法。在某些情况下,如果您使用 % 值,您可以使用更简洁的 CSS 样式表来实现您的设计。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

响应式设计像素与百分比 的相关文章

  • 在 CSS 选择器中转义双引号

    我有一个 html 标签 div style background image url div images test jpg gt 我想使用 CSS 选择器来定位这个元素 我尝试了下面的选择器 但它抛出错误 document queryS
  • 防止页面跳转到iframe

    我正在尝试通过 iframe 将 wetransfer 集成到网站中 但是当页面加载时遇到问题 它会跳转到页面的一半 因此它专注于 iframe 而不是在页面顶部打开 据我所知 wetransfer 网站上有一个脚本告诉它跳转到该部分 而不
  • 仅使用 HTML 正确填充电子邮件

    对于作业 我需要放置一个form在我的网页中 并让表单填充一封电子邮件供用户发送 我在四处搜寻后写下了这个
  • 在 th:href 链接中使用模型属性

    有没有办法在 th href 链接中引用模型属性 例如 a a Here 当前用户是控制器中指定的模型变量 这可以很容易地访问 如th text标签 但是 那th href百里香解析失败 如果有任何方法以这种方式引用模型属性 则在th hr
  • 编写XSL对xml数据执行一些操作

    如何在 products xsl 正文中编写 xsl 以获取数量 gt 10 的产品名称和状况 产品 xml
  • 禁用 CSS 规则

    有什么办法可以禁用 CSS 规则吗 我问是因为我使用的是 Kendo UI 他们的规则非常全面 例如 k grid td styles 然而 如果我把我的桌子放在他们的桌子里面 它的风格也会类似 所以它的影响太大 需要删除 更换 我不想手动
  • 整个页面都是玻璃板

    有没有一种简单的方法可以在整个 HTML 页面上拥有一个 玻璃窗格 而不管缩放 幻灯片事件 平台 浏览器 移动 桌面 我所说的 简单 是指纯 CSS 支持 而不是插件 后备 插件建议也可能有用 Thanks 如果您只是指所有内容之上的一层
  • MUI 组件上的渐变边框

    我没能找到相当于border image source css 我的目标是在按钮组件上渲染边框渐变 这是添加渐变边框的方法button成分 V5 const options shouldForwardProp prop gt prop gr
  • 方向改变后的javascript最大视口高度Android和iOS

    目标 查找设备的最大视口高度 包括设备的空间address bar这样我们就可以动态调整 min body 的大小并将内容向上推 问题 移动浏览器处理方向状态的方式不同 方向变化时更新 DOM 属性的方式也不同 使用 JavaScript
  • 如何检测浏览器中操作系统是否处于深色模式?

    如同 如何检测 OS X 是否处于深色模式 https stackoverflow com questions 25207077 how to detect if os x is in dark mode 仅适用于浏览器 有没有人发现是否有
  • 元素在主体内找不到足够的空间 - JavaScript 样式

    相关信息 该页面包含两个元素 An
  • IE 上具有最小宽度的内联跨度

    Hi我有 3 个SPAN那一定是inline并且有和一个min width 显然在 IE 上 SPAN不能有一个min width 我尝试使用DIV但当我把它放在inline the min width是忽略 CSS span displa
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件?

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css
  • Bootstrap 3 - 模态背景不会根据模态对话框的高度调整大小?

    我将一个表单放入模式中 并尝试在用户触发单选按钮时显示表单的一些隐藏字段 显示隐藏字段后 模态自动重新缩放的高度 但模态背景的高度不能用作模态对话框 我该如何解决它 div class modal fade div class modal
  • 按钮导致页面重新加载

    我在我的页面上使用 html 和 jquery 在我的 html 中 我有一个按钮 单击该按钮将触发一个功能 当页面加载时 我调用文档准备中的主函数 这是我的代码 div div
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 用于生成多色文本的 jQuery 插件,该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks
  • 手机上的网页滚动条可以隐藏吗?

    我正在尝试在移动设备上隐藏滚动条 一切在桌面上看起来都很好 没有滚动条 但是当我检查某些 Android 设备 ipad 时 我仍然可以看到灰色 细小的拇指 可以从浏览器中隐藏预定义的滚动条 我的代码 在桌面上运行良好 body webki
  • javascript:获取带有单位的CSS prop值[重复]

    这个问题在这里已经有答案了 我的代码是这样的 image 1 position absolute top 3vw 我的尝试 http jsfiddle net z8k6t3fb 1 http jsfiddle net z8k6t3fb 1

随机推荐