开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS表固定不同屏幕尺寸上的列更改位置

是通过CSS媒体查询和弹性布局来实现的。

媒体查询是一种CSS技术，它允许根据设备的特性（如屏幕尺寸、分辨率、方向等）应用不同的样式。通过使用媒体查询，可以根据不同的屏幕尺寸调整列的位置。

弹性布局（Flexbox）是一种CSS布局模型，它提供了灵活的方式来排列和对齐元素。通过使用弹性布局，可以轻松地调整列的位置和大小，以适应不同的屏幕尺寸。

下面是一个示例代码，展示如何使用媒体查询和弹性布局来固定不同屏幕尺寸上的列位置：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .column {
      flex: 1;
      padding: 10px;
    }
    
    @media screen and (max-width: 600px) {
      .column {
        flex-basis: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

在上面的代码中，.container是一个包含列的容器，.column是每个列的样式。通过设置display: flex和flex-wrap: wrap，容器中的列将按照弹性布局进行排列。

在媒体查询中，使用@media关键字指定了一个屏幕尺寸范围（这里是600px）。当屏幕宽度小于等于600px时，.column的flex-basis属性被设置为100%，使每个列占据整个容器的宽度，从而实现列的位置更改。

这种方法可以适应不同屏幕尺寸上的列位置变化，使页面在不同设备上都能够良好地显示。

腾讯云相关产品和产品介绍链接地址：

腾讯云媒体处理（音视频处理）：https://cloud.tencent.com/product/mps
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mad
腾讯云存储：https://cloud.tencent.com/product/cos
腾讯云区块链：https://cloud.tencent.com/product/baas
腾讯云元宇宙：https://cloud.tencent.com/product/vr

相关搜索:Android上的不同屏幕尺寸布局 CSS -如何获得位置:绝对；在不同的屏幕尺寸下工作良好 CSS Marquee超越了较小设备上的屏幕尺寸 CSS固定位置对不同的页面有不同的作用 Pygame的表面位置似乎与屏幕上的位置不同？RecyclerView更改屏幕上的位置不同屏幕尺寸上的矢量3位置使用CSS固定DIV内的跨度位置，而与屏幕大小无关包含固定列的CSS表固定按钮在不同屏幕上的位置

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【JQuery】扩展BootStrap入门——知识点讲解(二)

BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。

02

Bootstrap实用手册

Responsive Web Page，响应式网页/自适应网页，即一个页面既可以在 PC 浏览器中浏览，也可以在手机、平板中浏览，并且配合不同设备有不同的响应结果，响应式网页的特点：

02

Bootstrap栅格布局

Bootstrap栅格布局是一种响应式网格系统，用于构建灵活的网页布局。它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。

03

bootstrap容器

Bootstrap是一个流行的前端开发框架，提供了丰富的CSS和JavaScript组件，用于构建响应式和现代化的Web应用程序。其中，容器（Container）是Bootstrap中的一个重要组件，用于创建响应式布局和页面内容的容器。

03

css grid 布局那些事儿

CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。

03

响应式设计

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师 Ethan Marcotte 称这种方式为响应式设计（responsive design）。

01

【CSS】1287- 一行 CSS 实现 10 种强大的布局

现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。

02

响应式设计布局要不要了解一下？

我们正在跑步进入移动互联网时代，所以针对移动环境下web开发响应式设计成为发展的一个必然的趋势。所以这几天一直没更新文章，也是在准备怎么写关于这个响应式设计，毕竟用可以，但是想写的明白还是需要费点功夫的，有人说不会响应式布局不算一个合格的前端，也有人说响应式是css的高阶玩法，不管怎么说，我们还是要写一个教程的，今天我简单的解释一下什么是响应式布局设计，目前写的是怎么可以实现，和一些原则，然后具体的后期我会持续更新。正好也写一些有含金量的文章，之前写的文章太浅了，没什么技术含量，以后尽量不写太浅的东西，略略略，向着大神大步迈去...

03

Bootstrap学习文档（一）

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，使用这个框架可以简单高效的开发出适配各种屏幕的网站应用，即是编写一套代码，适用多重平台（PC，平板，手机等）。Bootstrap 相比其他框架，自由度更高，它提供了基本的样式和基本的组件，而不会在创造上约束开发者的思维。

02

CSS基础布局

CSS布局确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 早期以table为主(简单) * 之后以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局在移动端大行其道的时代是必备的 * table表格布局 * float浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局盒模型如下图所示：宽度和高度指的是content的宽度和高度 margin指的是距离上一个元素

02

前端移动web-day05学习笔记

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

02

前端框架与库 - Bootstrap响应式设计

在前端开发领域，Bootstrap无疑是最受欢迎的HTML、CSS和JS框架之一，它以其强大的组件库和响应式设计能力著称。响应式设计允许网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。本文将深入探讨Bootstrap的响应式设计原理，常见问题，易错点以及如何避免它们，附带代码示例，帮助你更好地掌握Bootstrap的响应式特性。

01

每个高级前端工程师都应该知道的前端布局

一套适用于手机、iPad 和 PC 的代码。每次加载不同的样式时，它们都能在一个项目中兼容。这就是所谓的响应性。然后，我希望产品经理能多考虑一下。我不想做了设计工作，最后却说它不好看，因为我不会做设计。

02

低代码如何构建响应式布局前端页面

在进行项目交付的场景中，常常会存在项目系统在不同设备，不同屏幕尺寸下使用和展示。因此在开发过程中需要针对此场景做针对性处理。一般来说，在处理这样的问题时，我们需要开发和提供不同的布局，通过检测视口的分辨率，判断当前访问设备的种类，请求不同的页面布局从而提供尺寸较为合适的展示场景。而不同的布局，可以选择提前开发完成，或者采用判断窗口大小的方式动态地调整最终页面来实现效果，业内称之为页面的响应式布局。

04

如何做一个自适应网页？

现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容

02

每天一个小技巧：纯CSS实现瀑布流（Masonry） HTMLCSS

瀑布流提供了一种错落有致的美观布局，被各种注重交互品味的素材网站（如：花瓣、unsplash）广泛应用。社区也提供了不少瀑布流布局的工具，如：masonry 、colcade 等。常规的实现瀑布流的做法是用 JS 动态的计算“砖块”的尺寸和位置，计算量大、性能差。今天给大家介绍一种使用纯 CSS 实现瀑布流的方法，简洁优雅。主要使用到了 CSS 中的多列属性 columns。

02

前端基础理论试题——附答案

在Microsoft Excel中，要计算A1到A10的和，可以使用公式 =__________。

01

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样，所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画：红框2为详细内容，默认收起；红框1处为事件响应热区，点击后展开或收起红框2的

08

前端不止：Retina屏幕下两倍图

所见不一定即所得眼睛是心灵的窗户，也是蒙蔽你的一种途径。假设，我给你一张图片，你觉得肉眼可以观察到全部的细节吗？屏幕上一张清晰的图片肉眼在屏幕上看到图片的清晰度由三个因素决定，一是图片像素本

05

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

03

应对冰桶算法的折腾再次领教了Adsense的强大！

百度最近的算法调整非常的频繁，特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大，因为冰桶算法4.0主要是针对移动端广告位置、尺寸的，基本上可以理解为是打击移动端广告泛滥的，所有尺寸过大的以及对内容有遮挡的都会被降权，具体的大家可以看看图1、图2两张百度官方认为是标准正确的移动端广告范例来对比了解一下就明白了。

04

Bootstrap 响应式框架第五集

2、在 tab-content中包含任意多的内容模块(class="tab-pane")

01

web移动端开发(7)上传码云+响应式布局_bootstrap框架

就是说我们不用再写一大堆的媒体查询了,直接把下载好的js文件引用就可以了,这个貌似已经过时了,所以就不多讲解.

01

【Web技术】522- 设计体系的响应式设计

在蚂蚁内部有着数量繁多且复杂的中后台业务系统，Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题，随着蚂蚁产品生态的多端化进程，越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露，例如：

02

响应式网页设计是什么？一套设计稿搞定所有设备！

设备大爆发的今天，屏幕尺寸各异，我们无法对每个设备都进行详细的设计，但可以借助响应式设计技术，用一套设计稿，也能搞定所有设备。

01

如何克服响应式布局的不足之处

随着移动设备的普及和互联网的发展，响应式布局成为了现代网页设计中必不可少的一部分。通过响应式设计，网页可以根据用户所使用的设备自动调整布局，使用户在不同的屏幕尺寸下都能获得良好的浏览体验。

01

响应式媒体查询media的用法

media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容. 下面介绍一下media媒体查询的使用方法 @medi

02

CSS进阶-CSS Sprites技术

在网页设计与开发领域，提高页面加载速度和优化用户体验是永恒的主题。CSS Sprites（精灵图）作为一种经典的图片合并技术，通过减少HTTP请求次数，有效提升了网站性能。本文将深入浅出地探讨CSS Sprites的核心概念、常见问题、易错点及规避策略，并通过实例加深理解。

01

详细的聊一聊如何使用响应式图片，提升网页加载速度

确保图片在所有屏幕尺寸上都能良好显示是一项困难的任务，因为你需要考虑图片的大小、图片的放置位置、显示图片的比例、用户连接的速度等等众多因素。结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。这会浪费用户的带宽，并且会显著减慢页面加载速度（尤其是在较慢的连接下）。

03

面试题整理｜45个CSS面试题

CSS已成为Web设计不可或缺的一部分，它让web页面变得更加美观，更具设计感。在前端面试中，CSS面试题也占有一定比重。本篇文章，将为大家分享45个和CSS相关的面试题及其解析，难度分为：初级、中级、高级三个部分，由易到难，循序渐进。

03

使用 CSS Grid 的响应式网页设计：消除媒体查询过载

你是否厌倦了在实现响应式网站时需要管理多个媒体查询？说再见复杂的代码，拥抱更简单的解决方案吧：CSS Grid。

01

【移动端网页布局】流式布局 ① ( 流式布局简介 | 百分比布局 / 非固定像素布局 | 根据屏幕尺寸 / 设备类型自动调整网页布局 )

为流式布局中盒子模型设置百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充 ;

03

移动端适配动态rem方案

在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。

01

bootstrap框架基础知识点整理

注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器

04

绝佳用户体验：构建响应式网页设计的关键原则

当谈到前端开发时，有许多有趣和实用的主题可以探讨。在本文中，我将为您提供一篇关于前端开发的文章，主题是"构建响应式网页设计"。响应式网页设计是前端开发中的关键概念，它使您的网站能够在不同设备和屏幕尺寸上提供一致且良好的用户体验。

03

深入浅出之移动端屏幕适配（1）

说到移动端：可以根据开发技术分，也可以根据操作系统来分，今天重点不是这个，是讲下使用CSS与Android如何进行屏幕适配。 1.先来了解几个概念：CSS中的px,em,rem分别是啥东西？ px:像素，如果像素要换算成物理长度，需要得到dpi(每英寸像素数) em:相对长度单位，大小相对于父级节点来说， rem:是CSS3新增的一个相对单位，这个单位引起了广泛关注。相对于根元素<html>,关于兼容性的问题，除了ie8及更早的版本，其他浏览器均支持 2.Android:也有类似的单位，dp(dip),sp

从零开始学 Web 之移动Web（六）响应式布局

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

02

使用标签承载内容

结构 head title meta body 文本标题和段落粗体和斜体上标和下标空白（白色空间折叠）折行和水平标尺语义化标记加粗和强调引用缩写词和首字母缩写词引文所有者联系信息内容的修改列表（list）有序列表（ordered list）无序列表（unordered list）定义列表（definition list）链接（anchor）页面链接锚链接功能链接图像（image）图像存储位置图像及其宽高选择正确的图像格式 JPEG GIF PNG 矢量图 fi

02

超越媒体查询：使用更新的特性进行响应式设计

除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站之外，我们使用一些比较不太被用或者比较新的特性来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。

01

网页布局的几种方式有哪些_做网页建议用哪种布局

这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。

02

移动web开发之rem适配布局

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.

02

手机的尺寸、分辨率、像素密度的关系「建议收藏」

前言一直以来，对手机屏幕尺寸、分辨率、像素和像素密度之间对关系摸不到头脑，今天就借此机会，学习记录一下啦。屏幕（主屏）尺寸是什么，怎么算？平时我们买手机，都有尺寸多大，比如苹果6s是5英寸的，华为p8是5.2英寸的，那么这个数字是怎么来的呢？开始以为是屏幕的面积大小，后来通过查询资料才知道，英寸是长度大小，不是面积单位，所以当然不是屏幕的面积咯。其实手机的尺寸其实代表手机屏幕的对角线长度。英寸和厘米的换算公式是： **1英寸（inch）=2.54厘米（cm）** 分辨率是什么？比如我们看苹果6s的分辨率是1920PX*1080PX，这代表什么呢？我们看到单位是PX，PX就是我们熟悉的像素，也就是苹果6s手机屏幕是由1920乘1080个像素组成的，1920代表的是手机纵向，1080代表的是手机的横向。什么是屏幕像素密度？屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。在读到这个每英寸屏幕时，我曾经深深的疑惑，这个每英寸是不是每平方英寸的简称呢？事实证明，我还是太年轻，这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以，我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。 ####屏幕像素密度，分辨率，屏幕尺寸之间的关系是什么？这三个专业名词之间，有着非常严谨的关系。为啥说严谨呢，因为这三者之间，有一个公式可以表示。

02

Android适配全面总结（一）----屏幕适配

版权声明：本文为博主原创文章(部分引用他人博文，已加上引用说明)，未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad4d

04

【Java 进阶篇】Bootstrap 快速入门

Bootstrap 是一个流行的开源前端框架，它使网页开发更加容易和高效。无论您是一个有经验的开发者还是一个初学者，本文将带您深入了解 Bootstrap，从基础概念到实际示例，以帮助您快速入门这个强大的工具。

01

开发人员必备：9个令人惊叹的CSS网格生成器推荐！

文章首先解释了CSS网格是什么以及为什么它在现代网页设计中非常重要。它强调了响应式设计的重要性，这是使网站在各种设备和屏幕尺寸上都能良好呈现的关键。

03

从零开始学 Web 之 CSS3（八）CSS3三个案例

而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

01

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

02

移动web开发(5)之rem适配布局

刚刚又把携程的案例做了一遍,发现还是有问题的,虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的.

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭