开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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表固定按钮在不同屏幕上的位置

相关搜索:

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

有帮助

没帮助

相关·内容

一文带你响应式网页设计入门

在快速发展的互联网环境中，各种类型新硬件设备的推出令人目不暇接，如果在这过程里我们的网页能自动适配各设备不同的分辨率且能以比较出色的样式为用户呈现网页的话，那么将为你的业务提供至关重要的作用。

02

前端课程——弹性盒子模型

CSS3 新增了弹性盒子模型（Flexible Box 或 FlexBox），是一种新的用于在 HTML 页面实现布局的方式。使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。

02

【React】【CSS】【案例】：Flex 弹性盒模型

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

04

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

02

移动端布局多种实现方式

对比总结一下热门的解决方案通过媒体查询的方式即CSS3的 @media 天猫首页使用的 flex 弹性布局淘宝首页使用的 rem+viewport缩放（Flexible.js） hot.css ---- ####@media媒体查询使用方法: @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时，应用下面的CSS样式/ /你的css代码/ } 优点: 移动端和PC维护使用同一套代码时，方法简单，成本低。可以通过-webkit-device-

06

CSS常见布局

前言在前端开发中，无论是过去，现在，甚至将来，页面布局一直是极为重要的一环，良好的布局方案往往能给用户带来舒适的体验。这篇文章便介绍一些常见的布局方式及其实现。一：两栏布局两栏布局常见于那些一

02

「译」前端项目中常见的 CSS 问题

快速摘要：近年来，跨浏览器的渲染和交互已经愈加一致。不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。

01

不可忽视的CSS布局

CSS布局是一个前端必备的技能,HTML如果说是结构之美,CSS就是视觉之美可以给用户不一样的体验的效果和视觉冲击。如果一个大方美观的布局,用户第一眼看到会很舒服,不仅提高了用户的视觉效果也提高了用户的体验效果。随着现在设备种类的增多,各种大小不一,奇形怪状的设备使得前端开发的压力不断增大,越来越多的UI框架层出不群,我们就会忽略了最基本的CSS,下面总结了一些经常用到的CSS布局,一起学习和进步。

01

深入 CSS 中的弹性盒子 Flexible Box

弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

04

CSS3的flex布局

flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如：自适应子元素（flex item，又称伸缩项目）的宽度伸缩项目的float，clear，vertical-align属性失效不能继承flex框，但可以依次设置可以修改flex流的方向以及布置规则现在就大体讲述下这个具体属性的表示含义。设置flexbox的兼容性将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如

06

08-移动端开发教程-移动端适配方案

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置字体水平百分比布局水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设

06

08-移动端开发教程-移动端适配方案

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。

一次性把所有普通和经典的网页布局讲得通通透透的，多图预警，建议收藏

超干货长文预警。这次把网页布局方案讲得通通透透的，等高布局，水平垂直居中，经典的圣杯布局等等全都有了。建议收藏

01

CSS 布局_2 Flex弹性盒

弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器

04

HTML & CSS页面布局之定位

默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。

01

30分钟彻底弄懂flex布局

在这篇文章里，想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程，为什么又要再写一篇？

css基础教程之flex布局

二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

01

CSS3新特性

box-shadow: h-shadow v-shadow blur spread color inset

03

使用网络构建复杂布局超实用的技巧，赶紧收藏吧!

作者：Shadid Haque 译者：前端小智来源：soshace 点赞再看，微信搜索【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 1024程序员节，160就能买到400的书，红宝书 5 折网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中，将会介绍所有

03

前端-彻底学会CSS布局-这是最全的

其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭