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

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

作者：小甜甜龌龊的华丽 | 来源：互联网 | 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探测,可以帮你找到哪些元素超出了屏幕...

推荐阅读

队列
云原生边缘计算之KubeEdge简介及功能特点

本文介绍了云原生边缘计算中的KubeEdge系统，该系统是一个开源系统，用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建，并为网络应用程序提供基础架构支持。同时，KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外，KubeEdge还支持跨平台工作，在私有、公共和混合云中都可以运行。同时，KubeEdge还提供数据管理和数据分析管道引擎的支持。最后，本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]

蜡笔小新 2023-12-14 16:49:01
ci
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
ci
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
cookie
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
cookie
position属性absolute与relative的区别和用法详解

本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义，以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式，说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因，即以浏览器左上角为原始点进行定位，不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]

蜡笔小新 2023-12-12 13:16:49
cookie
图片处理应用：固定容器缩略图实现

本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]

蜡笔小新 2023-12-10 18:52:53
ci
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
ci
【机器学习】生成式对抗网络模型综述

生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型，可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]

蜡笔小新 2023-12-14 17:51:18
ci
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
ci
Android中高级面试必知必会，积累总结

本文介绍了Android中高级面试的必知必会内容，并总结了相关经验。文章指出，如今的Android市场对开发人员的要求更高，需要更专业的人才。同时，文章还给出了针对Android岗位的职责和要求，并提供了简历突出的建议。 ... [详细]

蜡笔小新 2023-12-14 14:53:02
ci
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
上传
高校天文共享平台开发过程中的思考与规划

本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面，并总结了项目存在的问题，如前后端未分离、代码混乱等。作者表示希望通过记录和规划，能够理清思路，进一步完善该平台。 ... [详细]

蜡笔小新 2023-12-13 18:08:58
上传
解决VS写C#项目导入MySQL数据源报错“You have a usable connection already”问题的正确方法

本文介绍了在VS写C#项目导入MySQL数据源时出现报错“You have a usable connection already”的问题，并给出了正确的解决方法。详细描述了问题的出现情况和报错信息，并提供了解决该问题的步骤和注意事项。 ... [详细]

蜡笔小新 2023-12-13 16:31:57
service
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
service
CSS中的包裹性

之前一直都知道css中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。什么是包裹性？包裹性就是父元素的宽度会收缩到和内部元素宽度一样 ... [详细]

蜡笔小新 2023-10-17 20:09:31

小甜甜龌龊的华丽

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

Tags | 热门标签

RankList | 热门文章