开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将div显示在桌面和移动端/折叠/移动div的正确位置？

要将div显示在桌面和移动端，以及在折叠和移动时正确定位div，可以使用响应式设计和媒体查询来实现。

响应式设计：响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的设计方法。通过使用CSS的@media规则，可以根据不同的屏幕尺寸应用不同的样式。
媒体查询：媒体查询是一种CSS技术，可以根据设备的特性和属性来应用不同的样式。通过使用@media规则和媒体查询，可以根据屏幕宽度、设备类型等条件来设置div的样式。

下面是一个示例代码，展示如何使用媒体查询来实现在桌面和移动端显示div，并在折叠和移动时正确定位div：

<!DOCTYPE html>
<html>
<head>
<style>
/* 桌面样式 */
.div {
  width: 300px;
  height: 200px;
  background-color: red;
}

/* 移动端样式 */
@media only screen and (max-width: 600px) {
  .div {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
}
</style>
</head>
<body>

<div class="div"></div>

</body>
</html>

在上述示例中，div元素在桌面上显示为红色的300x200像素的矩形，在移动端上显示为蓝色的100x100像素的矩形。通过@media规则和max-width媒体查询，可以根据屏幕宽度来应用不同的样式。

对于移动div的正确位置，可以使用CSS的position属性和top、left、right、bottom属性来定位。例如，可以使用position: fixed来固定div的位置，然后使用top和left属性来设置div相对于浏览器窗口的位置。

希望这个答案能够帮助你理解如何将div显示在桌面和移动端，并在折叠和移动时正确定位div。如果需要更多关于响应式设计和媒体查询的信息，可以参考腾讯云的Web开发文档：https://cloud.tencent.com/document/product/454/7879

相关搜索:33.33%宽度的3个Div在移动端变为100%宽度 C#根据文本在桌面上的显示位置在屏幕上移动光标 Jquery在移动设备的某些点上滚动显示和隐藏div SCSS将DIV隐藏在移动设备和平板电脑中，并在桌面浏览器中显示为什么我的内联svg不能在Safari (桌面和移动)上正确显示？在桌面和移动设备中排列具有相同id的div 在滚动上变换div和移动位置？.scrollTop，.css变换在移动设备中拉伸一半图像以适应div，并在桌面div的半部分中显示半幅图像？如何使用JQuery/CSS在单击按钮时将div面板移动到所有其他div面板的下方？如何将div移动到绝对div的底部和顶部

相关搜索:

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

有帮助

没帮助

相关·内容

腾讯文档 | 全平台系统设计

背景 “操作系统对我们而言已不是最重要的了，更重要的是应用和服务。” [1] - 微软 CEO Satya Nadella 去年微软发布的便携折叠屏设备 Surface Duo 首次搭载了来自 Google 的安卓系统，而微软 CEO 也在随后的采访中表示 Windows 系统已不是微软未来的重心，他们更关心开发者如何为这些设备创造应用，无论这个平台是 Windows 还是安卓。与此同时，为了更好地服务开发者，微软也终于将原有的 UI Fabric 框架和移动端框架迁移到一个库并统称为 Fluent

02

经验分享：多屏复杂动画CSS技巧三则 - 腾讯ISUX

当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动：感谢sh

02

腾讯发布推理框架TNN全平台版本，同时支持移动端、桌面端和服务端

TNN是腾讯开源的新一代跨平台深度学习推理框架，也是腾讯深度学习与加速Oteam云帆的开源协同成果，由腾讯优图实验室主导，腾讯光影研究室、腾讯云架构平台部、腾讯数据平台部等团队一起协同开发。在经过4个多个月的迭代完善后，TNN新版本v0.3版本正式发布，是首个同时支持移动端、桌面端、服务端的全平台开源版本。TNN新版本在通用性、易用性、性能方面进一步获得提升。 TNN地址： https://github.com/Tencent/TNN 01 通用性在保证模型统一、接口统一的前提下，依托于硬件厂商提供的加

03

腾讯发布推理框架TNN全平台版本，同时支持移动端、桌面端和服务端

TNN是腾讯开源的新一代跨平台深度学习推理框架，也是腾讯深度学习与加速Oteam云帆的开源协同成果，由腾讯优图实验室主导，腾讯光影研究室、腾讯云架构平台部、腾讯数据平台部等团队一起协同开发。在经过4个多个月的迭代完善后，TNN新版本v0.3版本正式发布，是首个同时支持移动端、桌面端、服务端的全平台开源版本。TNN新版本在通用性、易用性、性能方面进一步获得提升。

01

经验分享：多屏复杂动画CSS技巧三则

首先，使用active触发每一屏的动画，几乎已经约定俗成，应该也建议成为默认的行业规范。

02

Web端集成TRTC SDK、集成播放器SDK

WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Edge 浏览器、桌面版 Firefox 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差。

04

基于vue2.0+vuex+localStorage开发的本地记事本

本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址：DEMO 功能说明支持回车添加事件支持事件状态切换

06

Flutter 3更新详解

Flutter 3 实现了 Flutter 以移动端为中心扩展到多平台的产品规划，并在今年 Google I/O大会的主题演讲上正式发布，继Flutter 2.10支持Windows 之后，此次发布提供了对 macOS 和 Linux 桌面端的稳定版支持，同时包括 Firebase 集成的改进，增加了与生产力和性能相关的新特性，并对 Apple 芯片提供了支持。

02

CSS 下拉菜单与 focus

focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素，笼统地说就是「获得焦点」的元素。

02

组件库设计实战 - 复杂组件设计

一个成熟的组件库通常都由数十个常用的 UI 组件构成，这其中既有按钮（Button），输入框（Input）等基础组件，也有表格（Table），日期选择器（DatePicker），轮播（Carousel）等自成一体的复杂组件。

01

【前端】移动端Web开发学习笔记【1】

window.pageXOffset和window.pageYOffset，包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。

03

2020年网站首屏设计：最佳实践和例子

首屏在网站的设计中起着非常关键的作用，它奠定了网站整体的基调。特别是极简主义盛行的这个时代，各种花里胡哨的东西往往不被看好。所以有时没有其他东西可以吸引眼球，网站首屏设计就变得更加重要。

01

武汉移动网站优化的五大要点

随着互联网的竞争激烈程度，大家对于移动端的排名优化都有足够的认识，现在的流量从PC端流入到移动端，这是众多人做网站优化的好机会。武汉佐伊科技将向您展示如何为搜索引擎进行有效的移动搜索引擎优化。

00

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

02

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

01

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

04

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

从零开始学 Web 之移动Web（五）touch事件的缺陷，移动端常用插件

我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。

02

【前端动画】实现动画的6种方式

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。（❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）

01

Bootstrap实战 - 响应式布局

响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

00

什么是“移动先行”原则，如何践行？

2010年的全球移动通信大会上，谷歌时任首席执行官Eric Schmidt 提出：产品设计应遵循 “移动先行” 的原则。该原则具体指什么？遵循该原则的依据有哪些？为什么它在产品设计中如此重要？本文中，我将重点回答这几个问题。一、什么是“移动先行” 原则？为了更好地理解该原则，首先要了解两个概念： 1. 响应式网页设计（RWD）一种网页设计方法。该设计使网页自动适应不同设备（电脑，手机或其他移动端）的屏幕大小，且呈现的内容符合用户的浏览习惯，从而减少用户在浏览时的缩放，平移和滚动等操作。

04

现代前端技术解析：前端三层结构与应用

前端三个基本结构：结构层HTML、表现层CSS、行为层JavaScript。现在的Web前端应用已经不是简单的三层结构就能轻松解决，而是已经形成了编译流程化、生产环境基础优化结构运行的模式。

03

跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程[通俗易懂]

通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。

02

Chrome 大版本更新来了，这是一次「史诗级」增强

8 月 25 日，Chrome 85 正式向稳定版通道进行推送。本次更新以标签页功能增强为核心，同时也带来了诸多不容错过的好功能！一起来看一看。

03

简要概述 CSS3媒体查询

参考文档：https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

03

CSS 伪元素技巧

在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能，本章学习一些进阶功能，看看伪元素能实现哪些方便好用的功能。

01

ios下Safari无法触发click事件的处理

<!DOCTYPE html> <html> <head> <title>122</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> </head> <body>

adfafasdfasdfasdfasfdasdf
adfafasdfasdfasdfasfdasdf<br/

03

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

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

02

移动端WEB开发之响应式布局

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

02

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

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

02

那些年，我们被耍过的bug——haslayout

IE，这个令所有网站设计人员讨厌，但又不得不为它工作的浏览器。不论是6、7还是8，它们都有一个共同的渲染标准haslayout，所以haslayout 是一个非常有必要彻底弄清除的概念。大多数IE下的显示错误，就是源于它。

01

移动端问题收集和解决

绑定tap方法的dom元素，触发该方法时，该dom元素下方同一位置的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素（input的focus事件），称为tap击穿现象。

02

欢迎了解Lightning Experience

你的销售代表有很强劲的需求。他们需要在Salesforce有良好的数据，所以他们才能得到即时的客户或潜在客户信息。我们需要在Salesforce中尽可能的减少手工操作，能够更快速和智能的销售，并且销售代表也无需事事都要请求管理员的帮助。

03

VueJS + Webpack 代码分割的三种方式

对单页应用实行代码分割，是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码，能够更快的看到页面并进行交互，这将会提升用户体验（特别是在移动端）；同时因为 Google 会给加载缓慢的网站降权，代码分割也对 SEO 有好处。

01

CSS基础布局

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

02

Bootstrap 响应式框架第五集

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

01

Mint UI入门系列教程

今天具体说一说比较常用的；Mint UI框架的按钮组件，Mint UI是饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要

03

HTML+CSS实现响应式布局页面，响应式布局入门教程

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。

05

css3自适应布局单位vw,vh详解

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

01

响应式网页bootstrap

相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能

03

未来大前端技术趋势深度解读

自Vue.js 3.0爆出，三大主流框架，写法也是越来越相似，越来越贴近 WebComponents 标准，而周边应用层面的封装已经开始指数级增长。小程序是今年最火的技术，接连出现，快应用也想分一杯羹。PWA（Progressive Web App）进入稳定期，尤其是 PWA桌面版，可以让我们更好的看清楚 PC 桌面版开发的全貌。移动端还是以强运营为主，各大公司都开始不再全力推动移动端了，开始重视多端并进，到了开始拼细节的阶段了。TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有的这一切都在暗示，浏览器即操作系统，你能想象到未来前端的样子么？

02

前端动画实现总结

SVG动画由SVG元素内部的元素属性控制，一般通过一下几个元素控制： - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化，但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径

01

我想推荐一本书《CSS 世界》

前段时间张鑫旭老师的《css 世界》出版，之前看过他写的博客，写的挺好的，一直就在思考要不要买？

01

前端面试比较好的回答

DNS占用53号端口，同时使用TCP和UDP协议。（1）在区域传输的时候使用TCP协议

03

【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器显示效果 )

移动端网页开发与 PC 端开发有很多不同之处 , 在图片处理方向需要采用二倍图 / 三倍图 / 多倍图方式进行图片处理 ;

04

移动端H5坑位指南

使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

01

第122天：移动端开发常见事件和流式布局

可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。

04

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。

01

可折叠设备的桌面模式

可折叠设备向用户们提供了使用他们的手机做更多事情的可能性，包括*桌面模式**等创新，也就是当手机平放时，铰链处于水平位置，同时折叠屏幕处于部分打开的状态。

03

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭