当前位置: 开发笔记 > 后端 > 正文

在自己电脑上做了一个网站，在其他电脑上看发现全乱了

作者：小甜甜龌龊的华丽 | 来源：互联网 | 2023-09-18 18:27

当屏幕小时会出现滚动条，可我不想有横向滚动条，也不想裁剪内容之后利用css媒体查询创建响应式。可效果还是不如意

当屏幕小时会出现滚动条，可我不想有横向滚动条，也不想裁剪内容
之后利用css媒体查询创建响应式。可效果还是不如意

7 个解决方案

#1

本人知识不多，请各位讲解详细一点，先谢谢了！~~~

#2

*{
width:100%
}

怎么看都觉得不对

#3

如果自己感觉对页面的控制能力不好，就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度，里面元素固定写死宽度。

少用媒体查询，那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式，页面最大的容器，根据媒体查询定几个宽度
然后嵌套每行的容器，宽100%
行容器再嵌套小区块容器，每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时，会把这些小区块“挤”成纵向排列的。分辨率较大时，小区块会横向排列。
如果不用像素限制小区块宽度的话，也可以3个小区块都是33%的宽度。指定百分比宽度。

#4

引用 3 楼 fjfjfj 的回复:

如果自己感觉对页面的控制能力不好，就不要做响应式
http://tongji.baidu.com/data/screen 这是baidu 的统计的分辨率使用情况。
给页面定一个固定宽度，里面元素固定写死宽度。

少用媒体查询，那玩意越弄越累。只在少数情况下定制一下就好。
--------------------
如果要做响应式，页面最大的容器，根据媒体查询定几个宽度
然后嵌套每行的容器，宽100%
行容器再嵌套小区块容器，每个容器指定像素宽度 float:left。当前浏览器的分辨率较小时，会把这些小区块“挤”成纵向排列的。分辨率较大时，小区块会横向排列。
如果不用像素限制小区块宽度的话，也可以3个小区块都是33%的宽度。指定百分比宽度。

不用响应式，好像页面架构会改变。
我是用1680*1050电脑做的网站。可是在1920*1680电脑下看会显示空白，在1366*768电脑下看会有横向滚动条，可我希望是网站紧缩一点，不要出现滚动条，除非真的很小的分辨率。

#5

1366x768看有横向滚动条，就是容器里面的小区快之和，超过了1366，把页面总宽度给撑出了滚动条。检查一下。
不过建议最好老老实实仿照下列大站的做法，定个1000或者1190的宽度。别在乎侧边是不是露白太多。
或者仿淘宝的做法。

我当前分辨率：1920x1080，看下列网站：
baidu新闻 984px
sina新闻 1000px
sohu 1040px
sina微博 1000px
凤凰网 1000px
taobao 1190px 。其中淘宝当分辨率切成1024x768后，看taobao 是有媒体查询，宽度990px

另外还有amazon的做法，最小1000px，最大1500px
#pageContent {max-width: 1500px;min-width: 1000px; margin: auto; overflow: hidden}

越是大站，分辨率就必须至少支持1024x968这个尺寸，不是超大型站点，一般根据用户群的特点，可能做到1190px

#6

个个健议你看一下bootstarp的做法，或者是一些大站，你这种做法很奇葩！！还有个人感觉你多看点基础！

#7



@media only screen and (max-width:1200px){

        #topbanner {

            width:1200px;

        }

    }

当屏幕小于某个尺寸,就让元素等于这个尺寸,可以保证你不会出现右侧空白的情况

另外,如果你想要所有设备都看上去一模一样,就不能设置固定的宽度,这样会把宽度挤出屏幕,导致出现滚动条
如:2个宽度300PX的图片,横着放,屏幕宽度只有500PX,就会有滚动条,
解决办法:图片设置50%(具体情况具体使用方法也不同,要自己多摸索了)

F12探测,可以帮你找到哪些元素超出了屏幕...

推荐阅读

port
探索HTML5：十五个关键的新特性

本文深入探讨了HTML5中十五个重要的新特性，为开发者提供了详细的指南。 ... [详细]

蜡笔小新 2024-11-26 19:09:22
port
CSS技巧：创建带有背景图的按钮

本文详细探讨了使用CSS创建带有背景图片的按钮的方法，并提供了具体的实例代码，帮助开发者解决实际开发中的相关问题。 ... [详细]

蜡笔小新 2024-11-26 16:48:44
service
精选Eclipse插件概览

本文介绍了多种Eclipse插件，包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等，涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]

蜡笔小新 2024-11-26 16:20:20
go
解决Bootstrap 4中按钮图标与文本对齐问题

在创建带有左侧图标的按钮时，遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ... [详细]

蜡笔小新 2024-11-25 19:20:18
port
MySQL: 如何利用Mysqlcheck进行表的检查、修复与优化

Mysqlcheck作为MySQL提供的一个实用工具，主要用于数据库表的维护工作，包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具，并提供一些实践建议。 ... [详细]

蜡笔小新 2024-11-25 18:41:02
微服务
Java高级工程师学习路径及面试准备指南

本文基于一位朋友的PDF面试经验整理，涵盖了Java高级工程师所需掌握的核心知识点，包括数据结构与算法、计算机网络、数据库、操作系统等多个方面，并提供了详细的参考资料和学习建议。 ... [详细]

蜡笔小新 2024-11-24 10:12:21
cron
为何Compose与Swarm之后仍有Kubernetes的诞生？

探讨在已有Compose和Swarm的情况下，Kubernetes是如何以其独特的设计理念和技术优势脱颖而出，成为容器编排领域的领航者。 ... [详细]

蜡笔小新 2024-11-22 09:26:11
go
理解浏览器历史记录（2）hashchange、pushState

阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后，本打算去研究pushState，偶然在一些信息中发现了锚点变 ... [详细]

蜡笔小新 2024-11-20 20:05:37
cache
JSP基础入门指南

本文介绍了JSP的基本概念、常用标签及其功能，并通过示例详细说明了如何在JSP页面中使用Java代码。 ... [详细]

蜡笔小新 2024-11-26 18:52:31
分布式
集群与负载均衡技术解析

本文探讨了集群(Cluster)的概念，即通过网络连接的一组计算机系统，它们作为一个整体提供服务，实现分布式计算。文章还详细介绍了负载均衡技术，旨在提高网络服务的效率和可靠性。 ... [详细]

蜡笔小新 2024-11-26 13:44:24
python
阿里云服务器新手指南：六步轻松部署网站

对于初次购买阿里云服务器的新手用户来说，如何高效地利用服务器资源并成功部署网站是一个重要的课题。本文将详细指导您完成从购买服务器到网站上线的六个关键步骤。 ... [详细]

蜡笔小新 2024-11-26 12:31:45
cache
实用浏览器插件与高效工具推荐

本文旨在介绍一系列提升工作效率的浏览器插件和实用小工具，帮助用户在日常工作中更加便捷高效。内容由原作者授权发布。 ... [详细]

蜡笔小新 2024-11-26 10:10:09
stdout
Docker安全策略与管理

本文探讨了Docker的安全挑战、核心安全特性及其管理策略，旨在帮助读者深入理解Docker安全机制，并提供实用的安全管理建议。 ... [详细]

蜡笔小新 2024-11-21 20:03:03
分布式
探索阿里巴巴的开源世界

从理想主义者的内心深处萌发的技术信仰，推动了云原生技术在全球范围内的快速发展。本文将带你深入了解阿里巴巴在开源领域的贡献与成就。 ... [详细]

蜡笔小新 2024-11-21 09:06:54
python
使用 Docker 在阿里云部署 Flask 应用

本文介绍如何在阿里云环境中利用 Docker 容器化技术部署一个简单的 Flask Web 应用，并确保其可通过互联网访问。内容涵盖 Python 代码编写、Dockerfile 配置、镜像构建及容器运行等步骤。 ... [详细]

蜡笔小新 2024-11-20 18:35:41

小甜甜龌龊的华丽

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章