首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Div以桌面为中心,而不是移动设备

这个说法是指在网页设计和开发中,使用Div元素(或称为容器)来布局和组织页面内容时,以桌面设备的屏幕尺寸和分辨率为主要考虑因素,而不是移动设备(如手机和平板电脑)的屏幕尺寸和分辨率。

在过去,由于桌面设备的主导地位,网页设计师和开发者通常会首先考虑桌面设备上的页面布局和显示效果,然后再通过响应式设计或者独立的移动版网页来适配移动设备。这种方式可以确保在桌面设备上获得最佳的用户体验和功能展示。

然而,随着移动设备的普及和移动互联网的快速发展,越来越多的用户开始使用手机和平板电脑来访问网页。因此,现代的网页设计和开发趋势是以移动设备为中心,采用响应式设计或者移动优先的策略,确保页面在各种设备上都能够良好地呈现和使用。

尽管如此,仍然有一些特定的场景和需求,需要以桌面设备为中心进行设计和开发。例如,某些企业应用程序、数据分析工具、设计软件等,可能需要更大的屏幕空间和更强的计算能力来展示复杂的图表、数据和功能。在这些情况下,Div以桌面为中心的设计方法仍然是合理和有效的选择。

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

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS(八)

并会介绍移动优先的响应式设计。 概述 响应式设计指的是网站可以在不论是宽屏显示器还是移动设备都能表现得同样出色。这是一种网页设计和开发方法,它消除了网站的移动版本与桌面版本之间的区别。...流式布局 流式布局是一种拉伸和缩小填充屏幕宽度的布局,如之前我们介绍过的 Flexbox 布局一样。 弹性媒体 不同的设备有不同的图像要求。HTML 提供了用户设备选择最佳图像的方法。...> srcset 属性还可以提供了图像固有的物理宽度,不是 1x 和 2x 描述符。...所谓移动优先,即优先考虑移动设备的样式,在非移动设备中进行响应式适配,这样做的好处是既可以在移动端有更好的表现,又能够在其他设备看到适配后的页面。...当然很多 Web 开发并不是移动优先的设计,做响应式网页的时候如果先开发的 PC 端,再进行移动适配,这就是 “PC 优先”。

74530
  • 管理云服务?扩展现有IT安全模式

    当有人加入组织,管理员可以通过Identity Manager将她的移动设备加入域,如果这个人后来离开了组织,管理员也可以将该移动设备从域内删除。 在云中,身份管理的IT安全模式同样发生了变化。...Salesforce例,管理员和用户都访问相同的云资源,但管理员被授予了更高级的权限,可以授权或撤销其他用户的权限。不过,如果Salesforce的某些部分出现故障,系统管理员能采取的措施很少。...例如,公司可能在某个数据中心内维护着自己的整个企业网络,而且提供虚拟桌面基础设施(VDI)作为服务。在这种场景下,用户不是从自己的办公桌上访问各自的桌面。...数据中心内的VDI场景,管理员管理虚拟环境,同样还包括了运行虚拟桌面的裸机服务器。从这个角度看,数据中心管理员管理更接近物理服务器,不是虚拟化环境。...因此,许多传统的安全机制,如网络防火墙,是可以考虑的设备,管理员还可能分配不同的物理服务器来承载不同类型的虚拟桌面负载。保护某些负载上的敏感数据,团队可能会在不同的VDI部署之间增加防火墙。

    1.2K50

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

    响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是每个终端做一个特定版本,响应式是解决移动互联网浏览器诞生的。...二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区的视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,将网页宽度设为设备宽度...多种屏幕设备的宽度主要分为四个区间。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式:内部引入和外部引入。...四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。 能够快捷解决多设备显示的适应问题。 4.2、缺点: 响应式网站无法区分移动端,所以会出现隐藏部分无用内容,浪费宽度,加载耗时长。

    1.8K10

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

    响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是每个终端做一个特定版本,响应式是解决移动互联网浏览器诞生的。...二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区的视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,将网页宽度设为设备宽度...多种屏幕设备的宽度主要分为四个区间。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式:内部引入和外部引入。...四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。 能够快捷解决多设备显示的适应问题。 4.2、缺点: 响应式网站无法区分移动端,所以会出现隐藏部分无用内容,浪费宽度,加载耗时长。

    97040

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

    响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是每个终端做一个特定版本,响应式是解决移动互联网浏览器诞生的。...二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区的视图符合屏幕分辨率,所以我们需要利用 meta 设置 viewport ,将网页宽度设为设备宽度...多种屏幕设备的宽度主要分为四个区间。...超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式:内部引入和外部引入。...四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。 能够快捷解决多设备显示的适应问题。 4.2、缺点: 响应式网站无法区分移动端,所以会出现隐藏部分无用内容,浪费宽度,加载耗时长。

    92520

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

    用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面适应每个设备的宽度做出了依据。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式,然后在其上构建更复杂的桌面版网页样式。...下面是移动优先样式的常见用例示例,其中对于较小的设备,列的宽度100%,但在较大的视口中,列的宽度50%。...适用于桌面设备的样式,我们利用与上一节中的示例类似的媒体查询将容器main元素设置flex-wrap: nowrap,这样可以确保子元素不会换行,通过在媒体查询中设置divflex-basis: 33%...您可以为桌面移动设备设置监控,获得有关您的网站响应情况的持续反馈。例如,Lighthouse报出当前设备未能正确加载的图像。 ?

    4.8K20

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

    度量单位:设备像素。 浏览器错误:IE8CSS像素对其进行度量,IE7和IE8模式下都有这个问题。 它们是显示器的属性,不是浏览器的。...---- screen.width and screen.height 意义:屏幕尺寸 度量单位:设备像素 像桌面环境一样,screen.width/height提供了设备像素单位的屏幕尺寸。...width/height使用layout viewport做为参照物,并且CSS像素进行度量,device-width/height使用设备屏幕,并且设备像素(??不是很理解)进行度量。...pageX/Y仍然是相对于页面,CSS像素单位,并且它是目前为止三个属性对中最有用的,就像它在桌面环境上的那样。...screenX/Y是相对于屏幕来计算,设备像素单位。当然,这和clientX/Y用的参照系是一样的,并且设备像素在这没有用处。

    16430

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

    设备的划分情况: 小于768的超小屏幕(手机) 768~992之间的小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...992px):宽度设置 970px 大屏幕(大桌面显示器,大于等于 1200px):宽度设置 1170px 但是我们也可以根据实际情况自己定义划分 2 、bootstrap(前端开发框架...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...超小屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container 最大宽度 自动(100%) 750px...-8 col-lg-pull-4">右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    4K20

    jQuery幻灯片插件slick

    简介 slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制...accessibility 布尔值 true 启用Tab键和箭头键导航 autoplay 布尔值 false 自动播放 autoplaySpeed 整数 3000 自动播放间隔 centerMode 布尔值 false 中心模式...centerPadding 字符串 ’50px’ 中心模式左右内边距 cssEase 字符串 ‘ease’ CSS3 动画 customPaging function n/a 自定义分页 dots 布尔值...false 指示点 draggable 布尔值 true 启用桌面拖动 easing 字符串 ‘linear’ animate() fallback easing fade 布尔值 false 淡入淡出...’ 滑动元素查询 slidesToShow 整数 1 幻灯片每屏显示个数 slidesToScroll 整数 1 幻灯片每次滑动个数 speed 整数 300 滑动时间 swipe 布尔值 true 移动设备滑动事件

    3.2K30

    零碎之viewport

    的大小不局限于可视区域,默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的桌面浏览器设计的网站...ppk认为,移动设备上有三个viewport。   首先,移动设备上的浏览器认为自己必须能让所有的网站都正常显示,即使是那些不是移动设备设计的网站。...但如果浏览器的可视区域作为viewport的话,因为移动设备的屏幕都不是很宽,所以那些桌面浏览器设计的网站放到移动设备上显示时,必然会因为移动设备的viewport太窄,挤作一团,甚至布局什么的都会乱掉...也许有人会问,现在不是有很多手机分辨率都非常大吗,比如768x1024,或者1080x1920这样,那这样的手机用来显示桌面浏览器设计的网站是没问题的吧?   ...这样的话即使是那些桌面设计的网站也能在移动浏览器上正常显示了。

    88140

    移动开发-响应式

    移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果...) 尺寸的增加,系统会自动分为最多12列 栅格选项参数: 超小屏幕 (手机) =768px 中等屏幕 (桌面显示器) >=992px 宽屏设备 (大桌面显示器)...sm-small:小; md-medium:中等; lg-large:大; 列 (column) 大于12,多余的列所在的元素将被整体另起一行排列 每一列默认有左右15像素的 padding 可同时一列指定多个设备的类名...">列嵌套 列偏移: 使用 .col-md-offset 类可以将列向右侧偏移,这些类实际是通过使用 * 选择器当前元素增加了左侧的边距 (margin

    2.4K20

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

    通常我们在选择方案时,需要考虑下面几个问题: 能否使用同一个站点域名避免跳转; 能否保证移动端加载的资源内容最优; 如果做移动端和桌面浏览器的差异化功能; 如果根据更多的信息进行更加的灵活判断,不仅仅依靠...结构层响应式 根据不同的设备浏览器渲染不同的页面结构,不是直接跳转。可以通过下述两种方式:一是页面内容在前端渲染;二是页面内容在后端渲染。...数据内容响应式 首先要确保移动端优化资源为主,保证移动端页面的首屏内容优先加载,然后通过异步的方式来实现桌面端或移动端剩余内容的加载。.../main'], function($, main) { main.init(); }); } 后端数据渲染响应式 通过URL或者UA判断设备,尽可能将桌面端和移动端的业务层模块分开维护。....col-2 .col-3 .col-4 屏幕适配布局 屏幕适配布局是为了实现网页内容根据移动设备屏幕大小等比例缩放所提出的一种布局计算方式

    1.1K31

    Jump Start Bootstrap 第2章

    创建动态布局 让我们看看如何将网格系统付诸实践,创建一个动态布局,适应它所被查看的设备的大小。 假设我们使用Bootstrap创建一个博客的布局;我们给出了它的桌面显示线框图,如图所示 ?...在这个设计中,我们看到标题看起来与桌面模式相同。下面的帖子现在被包含在一个两栏的布局中,不是三个。接下来,我们需要在移动设备上查看相同的网站。移动显示的线框如图所示 ?...我们刚刚将这两列转换为移动设计中的一列。 让我们讨论如何在标记中实现此设计。 桌面显示下的设计 如前所述,中型显示器被认为大于992px。桌面显示大部分都比这个大。...移动设备上的设计 和平板电脑一样,移动设备也可以在风景和人像模式下观看。移动设备中的景观视图利用小型显示器(屏幕宽度768px),我们已经使用了col-sm类。...移动设备中的竖屏视图使用了额外的小型显示器(屏幕宽度小于768px)。 对于移动设备的线框,我们必须创建一个单列布局。我希望您已经知道如何在上述代码中实现它。

    2.9K40

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

    设备的划分情况: 小于768的超小屏幕(手机) 768~992之间的小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...父容器版心的尺寸划分 超小屏幕(手机,小于 768px):设置宽度 100% 小屏幕(平板,大于等于 768px):设置宽度 750px 中等屏幕(桌面显示器,大于等于 992px):...宽度设置 970px 大屏幕(大桌面显示器,大于等于 1200px):宽度设置 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...-8 col-lg-pull-4">右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    3.4K31

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

    在这里我们京东的M站例进行说明: ? ? ?...三、响应式开发 1、什么是响应式开发 在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 通常的做法是针对移动端单独做一套特定的版本。...2、响应式开发的前景 现在的移动设备屏幕越来越大。 越来越多的设计师也采用了这种设计。 在新建站的一些网站现在普遍采用的响应式开发。 那么在前端开发当中也是一项必备的技能。...超小屏幕:768px以下(移动设备)。 小屏设备:768px-992px。 中等屏幕:992px-1200px。 宽屏设备:1200px以上。...-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化变化 6 --> 7 8 栅格系统:Bootstrap

    3.6K40

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

    目前大多数类似页面只针对移动端,例如其他同事实现的QQ空间5.0预约页第二版: ? 扫码(需登录)或者链接二选一: ?...其次,帅气的翻屏动画并不是移动端专有,桌面端也适用。稍稍用力,桌面移动全适配,何乐而不为! 技巧二、不同状态下的连续动画 有时候,动画可能不是一波流,分状态。...后来,进行了修改,内部动画元素整体居中,外部容器桌面端做左侧60像素偏移,于是,适配移动端时候,就正好是居中的啦。 ? ②. 定位方式居中定位 所谓“居中定位”是相对“传统定位”而言的。...但是,如果你和多元素CSS动画打交道,可能就需要改变下惯性思维了,很重要的一点就是“从以左上角参考点变成中心参考点”。 ? ?...前面一步到位不挺好的,后面这样分两步走岂不是多余? 在大多数情况下,我们的应用场景比较单一,或只需要玩转移动端,或只需要驾驭桌面端,此时,上面两种定位的优劣是看不出来的。

    1.6K20

    PinePhone –适合所有人的开源智能手机

    它支持所有主要的Linux Phone中心的项目,以及其他免费和开源的操作系统,促进开发人员之间的协作。...2.Phosh Phosh(电话外壳程序的简称)是一种用于移动设备上GNOME的完全免费的开源Wayland外壳程序,旨在通过易于使用的原型模板移动电话用户带来GNOME桌面环境的精妙之处。...它以隐私和安全性中心的免费软件核心开发而成,并且通过在特定部分保持极简主义但保留一个设备封装以及其他设计方法,完全避免了Android构建系统。...Ubuntu Touch Ubuntu Touch是流行的Ubuntu操作系统的移动版本,由世界各地一群热情的志愿者开发和维护,目的是移动电话用户在其智能设备上提供独特的计算体验。...嗯,除了运行几个包含左手复制权的Linux移动操作系统之外,它的大多数组件都是拧入不是焊接在适当的位置,这使其成为实验用途的理想标本,因为它可以在5分钟内拆卸下来,并且比其700美元的 Liberem

    2.8K10

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

    其次,帅气的翻屏动画并不是移动端专有,桌面端也适用。稍稍用力,桌面移动全适配,何乐而不为! 技巧二、不同状态下的连续动画 有时候,动画可能不是一波流,分状态。...后来,进行了修改,内部动画元素整体居中,外部容器桌面端做左侧60像素偏移,于是,适配移动端时候,就正好是居中的啦。 ? ②. 定位方式居中定位 所谓“居中定位”是相对“传统定位”而言的。...但是,如果你和多元素CSS动画打交道,可能就需要改变下惯性思维了,很重要的一点就是“从以左上角参考点变成中心参考点”。 ? ?...前面一步到位不挺好的,后面这样分两步走岂不是多余? 在大多数情况下,我们的应用场景比较单一,或只需要玩转移动端,或只需要驾驭桌面端,此时,上面两种定位的优劣是看不出来的。...350像素,没法重用; 当在iPhone5/iPhone5s下,屏幕320像素宽(小于350像素),由于左上角定位,因此,整体不是居中效果; 方法2,屏幕尺寸再小,也是居中的,只不过两侧有所剪裁。

    1.3K20
    领券