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

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

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

推荐阅读

图片
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
微服务
Docker的安全基准

nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]

蜡笔小新 2024-12-28 13:00:24
port
导航栏样式练习：项目实例解析

本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ... [详细]

蜡笔小新 2024-12-27 19:42:28
port
如何高效创建和使用字体图标

在Web和移动开发中，为什么选择字体图标？主要原因是其卓越的性能，可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程，并提供了专业建议。 ... [详细]

蜡笔小新 2024-12-26 20:48:44
分布式
Hadoop入门与核心组件详解

本文详细介绍了Hadoop的基础知识及其核心组件，包括HDFS、MapReduce和YARN。通过本文，读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]

蜡笔小新 2024-12-26 13:12:48
并发
深入解析 Apache Shiro 安全框架架构

本文详细介绍了 Apache Shiro，一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作，使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API，同时确保高度的安全性和灵活性。 ... [详细]

蜡笔小新 2024-12-25 16:03:57
注入
ASP.NET Core 3.1 中的Startup类

Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类，按照约定命名为 Startup。 Startup 类：可选择性地包括 ... [详细]

蜡笔小新 2024-12-25 02:13:25
注入
PHP 编程疑难解析与知识点汇总

本文详细解答了 PHP 编程中的常见问题，并提供了丰富的代码示例和解决方案，帮助开发者更好地理解和应用 PHP 知识。 ... [详细]

蜡笔小新 2024-12-28 12:22:34
注入
国内BI工具迎战国际巨头Tableau，稳步崛起

尽管商业智能（BI）工具在中国的普及程度尚不及国际市场，但近年来，随着本土企业的持续创新和市场推广，国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争，国内BI工具通过不断优化产品和技术，赢得了越来越多用户的认可。 ... [详细]

蜡笔小新 2024-12-28 11:12:44
smtp
PHP 5.2.5 安装与配置指南

本文详细介绍了 PHP 5.2.5 的安装和配置步骤，帮助开发者解决常见的环境配置问题，特别是上传图片时遇到的错误。通过本教程，您可以顺利搭建并优化 PHP 运行环境。 ... [详细]

蜡笔小新 2024-12-27 19:05:41
注入
深入解析Spring Cloud Ribbon负载均衡机制

本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式，帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]

蜡笔小新 2024-12-27 16:01:25
注入
Python学习笔记：使用pydoc工具查询文档

本文介绍了在Windows环境下使用pydoc工具的方法，并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外，还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]

蜡笔小新 2024-12-26 17:05:56
注入
5G至4G空闲态移动TAU流程解析

本文详细解析了用户从5G网络移动到4G网络时，在空闲态下触发的跟踪区更新（TAU）流程。通过N26接口实现无缝迁移，确保用户体验不受影响。 ... [详细]

蜡笔小新 2024-12-26 10:49:49
并发
3.3 实现松耦合组件：MVC 模式中的关键特性

本文探讨了在 ASP.NET MVC 5 中实现松耦合组件的方法。通过分离关注点，应用程序的各个组件可以更加独立且易于维护和测试。文中详细介绍了依赖项注入（DI）及其在实现松耦合中的作用。 ... [详细]

蜡笔小新 2024-12-25 09:14:49
注入
网易严选Java开发面试：MySQL索引深度解析

本文详细记录了网易严选Java开发岗位的面试经验，特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文，读者可以了解面试官常问的索引问题及其背后的原理。 ... [详细]

蜡笔小新 2024-12-24 19:50:16

小甜甜龌龊的华丽

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

Tags | 热门标签

RankList | 热门文章