微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

各位是怎样解决屏幕的分辨率的问题的呢？_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:34:57
原创
1201人浏览过

我的笔记本是15.6英寸的，我开发的网页在我的电脑上看起来比较好，但是我想换一个大的屏幕的话，应该有很多元素会错位。请问各位是怎样解决这个问题的呢？我觉得通过绝对布局，相对布局和宽度等采用百分比都有瑕疵，对不同的分辨率都错错位，请问各位做网页的时候是怎么做的呢？是采用什么样的方式来解决不同的分辨率的问题呢？

Looka
Looka

AI辅助Logo和品牌设计工具

Looka 894
查看详情 Looka


回复讨论(解决方案)

响应式布局

我一般限制最大宽度1024，锁死

我的笔记本是15.6英寸的，我开发的网页在我的电脑上看起来比较好，但是我想换一个大的屏幕的话，应该有很多元素会错位。请问各位是怎样解决这个问题的呢？我觉得通过绝对布局，相对布局和宽度等采用百分比都有瑕疵，对不同的分辨率都错错位，请问各位做网页的时候是怎么做的呢？是采用什么样的方式来解决不同的分辨率的问题呢？



1.首先肯定是响应式布局，但根据你的描述，应该不会涉及到响应式布局那么麻烦；
2.其实我觉得你可以先定好一个框架，比如说，先定义一个大的div框，宽度固定（宽度不超过PC最小屏幕，一般为1000px），然后在浏览器中绝对居中，最后所有元素都在该框架中布局。感觉一般网站都是这样做的，超过框架部分都会两边留白，或者加一些过度色；
3.如果没人设计网站，你自己设计，自己制作的话，建议去看看bootstrap这个框架。

同意楼上，最外面的div给100%；内容显示区给1000px；所有值都给固定值，那样在大屏显示也只是两边留白区域增加，不显影整体布局

感谢各位的回复，感觉茅塞顿开。我增加了分数分给各位。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：利用sublime的snippet功能快速创建代码段_html/css_WEB-ITnose 下一篇：请教一个问题_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML表单选中状态怎么设置_HTML单选与复选框默认选中状态的设置方法 使用checked属性可设置单选按钮和复选框的默认选中状态，无需赋值；2.单选按钮通过name属性分组，同一组中仅一个可被默认选中；3.复选框可多选，多个选项添加checked即默认选中；4.可结合JavaScript动态控制checked状态，服务端渲染时也可根据数据决定是否选中。
2025-11-23 15:56:03
681
PHP 关联数组的遍历与最佳实践：告别 for 循环，拥抱 foreach 本教程详细介绍了PHP中关联数组的定义、元素访问及高效遍历方法。文章着重分析了使用for循环遍历关联数组的常见误区及其引发的问题，并推荐使用foreach循环作为处理关联数组的最佳实践。同时，教程也强调了编写整洁、规范的PHP代码的重要性。
2025-11-23 13:32:31
600
Laravel 中实现数据库数据在 标签的动态预选 本文详细介绍了如何在Laravel应用的编辑界面中，实现标签根据数据库中已保存的数据自动预选相应选项。通过控制器获取当前记录及其关联数据，并在Blade视图中利用条件逻辑动态添加selected属性，确保用户在编辑时能直观看到并修改之前的选择，同时提供了后端数据处理和前端视图渲染的示例代码及最佳实践。
2025-11-23 13:24:49
744
优化CSS动画：解决侧边栏和图标同步收缩时的跳动问题 本教程旨在解决网页侧边栏收缩动画中，图标出现非平滑“跳动”的常见问题。我们将深入分析CSStransition属性在缺乏明确起始状态时的表现，并提供专业的CSS定位和类切换策略，通过移除冲突的定位属性，实现侧边栏及其内部图标的同步、流畅动画效果，从而显著提升用户界面的视觉连贯性和用户体验。
2025-11-23 13:24:06
231
Python Requests访问受Referer限制链接的策略与实践 在使用Python的requests库进行网页抓取或自动化时，直接请求某些链接可能会因目标网站对HTTPReferer头部的验证而失败或被重定向。本文将深入解析Referer头部的作用及其在链接访问中的重要性，并提供一个实用的解决方案，演示如何通过在requests请求中正确设置Referer头部，从而成功访问那些需要特定来源页面的受限资源。
2025-11-23 13:23:31
272
Blazor教程：正确绑定Select下拉框选项，避免选择后显示空白 本文旨在解决Blazor应用中Select下拉框在用户选择选项后显示空白的问题。核心问题在于对selected属性的错误使用，导致下拉框无法正确显示当前选定的值。教程将详细阐述如何通过条件式绑定selected属性，结合Blazor的@bind指令，确保下拉框在任何时候都能准确反映用户的选择，并提供清晰的代码示例和注意事项，帮助开发者构建稳定可靠的表单。
2025-11-23 13:22:02
222
快速识别浏览器窗口的Bootstrap断点尺寸：实用工具与应用指南 在响应式网页设计中，准确识别当前浏览器窗口对应的Bootstrap断点尺寸至关重要。本文将介绍一个实用的在线工具，帮助开发者和设计师快速检测屏幕宽度所匹配的Bootstrap断点（如X-Small、Small、Medium等），从而优化布局调试和响应式开发流程。
2025-11-23 13:20:02
130
Laravel教程：实现编辑表单中select标签的数据库数据预选功能 本文详细介绍了在Laravel编辑界面中，如何根据数据库中已保存的数据，自动预选select标签（特别是多选select）中的选项。核心在于后端控制器准备已关联数据的ID集合，并在前端Blade模板中，通过循环遍历所有可用选项时，有条件地添加selected属性，确保用户在编辑时能直观看到当前记录的关联选择。
2025-11-23 13:14:02
298
Laravel Blade模板中动态表格删除按钮ID传递问题解决方案 针对Laravel应用中动态表格删除操作时，Bootstrap模态框始终获取第一个记录ID的问题，本文提供了一种解决方案。通过将模态框定义在循环外部，并利用JavaScript动态捕获点击按钮的记录ID，然后更新模态框内确认删除按钮的ID值，确保每次删除操作都针对正确的记录。
2025-11-23 13:12:56
654
解决CSS元素在页面缩放时溢出容器的问题 本文旨在解决网页元素在浏览器高倍率缩放时超出其容器边界的问题。核心原因在于元素使用了固定的像素单位（px）或在缩放后变得过大的相对单位，导致其尺寸无法自适应容器。教程将详细介绍两种主要解决方案：一是采用响应式单位（如%、vw、vh、rem）使元素尺寸与视口或根字体大小同步缩放；二是利用CSS的overflow属性为容器添加滚动条，以优雅地处理溢出内容。
2025-11-23 13:12:06
262
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部