根据屏幕分辨率隐藏和显示div元素，我哪里错了？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css页面自适应屏幕大小_html图片自适应屏幕

大家好，又见面了，我是你们的朋友全栈君。...=1.0"> 在css中添加如下内容可以分别定制不同屏幕的显示样式： /* 大屏幕：大于等于1200px*/ @media (min-width: 1200px) { ... } /*默认*/ @...media (min-width: 980px){...} /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px) and (max-width: 979px)...{ ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { ... } /* 横向放置的手机及分辨率更小的设备 */ @media...(max-width: 480px) { ... } 响应式布局辅助class：以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏 class 设备 .visible-xs

8.1K3 0

H5 App实战进阶十三：H5 App的响应式设计与适配多屏幕

本文将深入探讨响应式设计的原则、工具和技术，并通过实例展示如何在H5 App中实现多屏幕适配。核心内容1. 响应式设计原则灵活性：布局应能够根据不同屏幕尺寸和分辨率进行自适应调整。...流动性：内容应根据容器大小进行流动排列，而不是固定位置。媒体查询：使用CSS媒体查询来针对不同屏幕尺寸应用不同的样式。优先级：确保在较小屏幕上显示最重要的信息，避免内容过载。2....响应式图片与媒体srcset和sizes属性：为标签提供不同分辨率的图片，浏览器会根据当前设备的像素密度选择合适的图片。...元素：允许为不同的屏幕尺寸和像素密度提供不同的图片资源。视频响应式处理：使用CSS和JavaScript确保视频在不同设备上都能正确播放。4....使用媒体查询（@media (max-width: 768px)）来调整小屏幕上的布局，隐藏菜单项，并在点击汉堡菜单图标时显示。添加了一些基本的样式，如背景颜色、文本颜色、悬停效果等。

1481 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...超小屏幕手机 (屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...响应式布局使用移动端窄屏时，隐藏内容依然会加载，低分辨率加载高质量图片或视频，不同屏幕尺寸都提供相同的网页，加载内容多，浪费流量，速度慢，容易造成用户流失。兼容所有终端，工作量大，效率低下。

9724 0

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

二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...超小屏幕手机 (屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...响应式布局使用移动端窄屏时，隐藏内容依然会加载，低分辨率加载高质量图片或视频，不同屏幕尺寸都提供相同的网页，加载内容多，浪费流量，速度慢，容易造成用户流失。兼容所有终端，工作量大，效率低下。

1.8K1 0

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

二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...超小屏幕手机 (屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...写媒体查询的时候要按照屏幕从小到大的设置。外层包裹的元素宽度处理要使用百分比。图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。...四、响应式优缺点 4.1、优点：面对不同分辨率设备灵活性强。能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...响应式布局使用移动端窄屏时，隐藏内容依然会加载，低分辨率加载高质量图片或视频，不同屏幕尺寸都提供相同的网页，加载内容多，浪费流量，速度慢，容易造成用户流失。兼容所有终端，工作量大，效率低下。

9322 0

javaWeb核心技术第六篇之BootStrap

992分辨率屏幕 768分辨率屏幕分辨率屏幕栅格系统...★ 在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用...--下div: 左div:中等屏幕时占2份,小屏和超小屏隐藏图片右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏...--middle div:中等屏幕时占6份,小屏和超小屏隐藏图片--> div class="col-md-6 hidden-sm hidden-xs"> div: 左div:中等屏幕时占2份,小屏和超小屏隐藏图片右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏

1.3K1 0

BootStrap框架总结

媒体查询(了解) :默认有一些分辨率零界点的阀值"" - 分辨率屏幕大小 - 分辨率>=1200px 超大屏幕...- 992分辨率屏幕 - 768分辨率屏幕 - 分辨率屏幕...格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用" 行:...中屏 col-sm-n 小屏 col-xs-n 超小屏响应式工具: 显示: visible-xs 超小屏可见 visible-sm 小屏可见 visible-md 中等屏幕可见...visible-lg 大屏幕可见隐藏: hidden-xs 嘲笑屏时隐藏 hidden-sm 小屏幕时隐藏 hidden-md 中等屏幕时隐藏 hidden-lg 大屏幕时隐藏

3.3K2 0

关于响应式布局，你需要了解的知识点

如果是在类似于 iPad Pro 的平板电脑上，由于屏幕大小原因，我们会使用不一样的布局。对于美团官网来说，他们就把顶部的导航栏隐藏起来，需要通过点击左上角的菜单按钮才能显示，如下图所示。...如果是在更小的手机屏幕上，那不仅导航栏要隐藏起来，就连下面的文章列表也只能一行显示一篇文章，如下图所示。...其实实现这样的效果很简单，只需要实现这样的逻辑即可：默认情况下，显示 ipad 类对应的 div 块，隐藏 pc 类对应的 div 块。...当浏览器的宽度大于 1280px，那就隐藏 ipad 类对应的 div 块，显示 pc 类对应的 div 块。实现的 CSS 代码如下所示。...ipad 对应的 div 块中实现相应的 html 结构和 CSS 样式即可。

5211 0

BootStrap 前端框架简介

还是使用以前的固定单位去布局，会引发两个问题：（1）分辨率太大，网页两边留白太多（2）分辨率太小，页面显示不完全概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...2.代码累赘，会出现隐藏无用的元素，加载时间长 1.3.1 媒体类型方式1： @media 媒体类型 { 选择器{ /样式代码写在这里…/} } 方式2：元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。...我们也可以根据自己的需要，定义列数： Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。...- 屏幕宽度等于或大于 768px) .col-lg 大桌面显示器 - 屏幕宽度等于或大于 992px) .col-xl 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 2.2.1网格系统规则

1701 0

【架构师（第五十二篇）】几个前端工具的基本使用

主要使用在浏览器上，用来精确的度量 Web 页面上的内容，CSS 像素被称为与设备无关的像素（device-independent像素），简称为 DIPs window.devicePixelRatio 返回当前显示设备的物理像素分辨率与...CSS像素分辨率之比，简单来说，它告诉浏览器应该使用多少屏幕实际像素来绘制单个 CSS 像素。...特例视网膜（Retina）显示屏，它会使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像，devicePixelRatio 为 2。...另外，无法截取隐藏部分的内容。..., 拥有唯一的 id div id='target-id'>我是被复制的内容div> // 需要一个进行复制操作的元素 ,需要添加自定义属性 data-clipboard-target, 需与目标

4003 0

Bootstrap响应式工具

xl（超大屏幕）：适用于大型台式机和显示器，屏幕宽度大于等于1200px。通过在类名中使用这些断点，开发者可以根据不同屏幕尺寸应用特定的样式或布局。...显示/隐藏类Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏的类。这些类可以根据需要在不同的断点上添加或移除。...以下是Bootstrap提供的显示/隐藏类：.d-none：在所有断点上隐藏元素。.d-{breakpoint}-none：在指定断点上隐藏元素，例如.d-sm-none在小屏幕上隐藏元素。....d-{breakpoint}-inline-block：在指定断点上以内联块元素显示元素。通过使用这些显示/隐藏类，可以根据不同屏幕尺寸来控制元素的可见性，从而实现更好的响应式布局。...例如，.mw-lg-75将在大屏幕及以上的屏幕尺寸上将元素的最大宽度设置为75%。通过使用这些宽度调整类，可以根据不同屏幕尺寸来调整元素的宽度，以实现更好的布局控制和适应性。

2.3K4 0

scrollWidth,clientWidth,offsetWidth的区别

大家好，又见面了，我是你们的朋友全栈君。...：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度...需要注意的是，DIV和P这一对包含元素，都需要设置position为absolute才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上层定义过position的元素，直到整个文档； 2. posTop...4. scrollHeight 与 offsetHeight offsetHeight是自身元素的高度，scrollHeight是自身元素的高度+隐藏元素的高度。...：”+ window.screen.height; s += “/r/n屏幕分辨率的宽：”+ window.screen.width; s += “/r/n屏幕可用工作区高度：”+ window.screen.availHeight

2.2K2 0

移动端开发的几点建议

// 高刚好我手上有一个华为 m5 平板和华为 m5 pro 平板，大小分别为 10.1 寸和 10.8 寸，分辨率为 1920 x 1200，2560 x 1600。...获取到它们的真实开发尺寸分别为 960 x 600 1024 x 640，根据分辨率和真实开发尺寸还能得知两个设备的设备像素比分别为 2 和 2.5。如图所示（华为 m5） ?...在此，我建议你使用 vw 和 vh 作为移动端开发的相对单位，包括字体大小、元素宽高、距离等等。...在字体大小上最好使用 px，这样可以确保多个页面下显示效果一致，并且更大的屏幕能显示更多的内容。如果不使用 px，而是使用 vw rem，则要写很多 @media 语句来兼容页面样式，工作量巨大。...另外还要用 @media 根据分辨率来调整元素的大小、字体的大小等等。

9892 0

前端开发必会的HTMLCSS硬知识（二）

和offsetHeight 设置style属性对应的css属性如下：盒子模型相关属性定位及浮动属性节点内部的文字结构 repaint:改变不影响元素。...在网页中的位置的元素样式时，根据浏览器新属性重新绘制一次。不会带来重新布局。...rem 根据当前屏幕的宽度和设计稿的宽度，算出html的基准值假设当前屏幕宽度为375px 设计稿上是640px 当前屏幕宽度/设计稿宽度 = x / 100 => x = 当前屏幕宽度/设计稿宽度...px：相对于显示屏分辨率而言 em: 相对于父元素 .father{font-size:16px;} .son{font-size:2em} 2em = 2*16 rem：相对于html根元素 html...{font-size:20px;} .div{font-size:2rem} 2rem = 2*20 rpx: 微信小程序（规定屏幕宽为750rpx）如何实现0.5px的边框？

2.2K3 1

简单粗暴的移动端适配方案 - REM

1.3 响应式布局通过媒体查询根据不同的屏幕分辨率来进行适配，响应式的问题在于：屏幕分辨率分区间：区间内无法进行区分，无法实现100%兼容，一般是用主流分辨率来进行划分；额外的工作量：响应式布局的工作都是需要开发者去实现的...{width: 20rem;} /* 20 * 16px = 320px*/ 看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了...3.1 JS计算通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。...3.2 媒体查询既然只是为了根据屏幕宽度来设置元素的字体大小，那我们完全也可以通过css3媒体查询来完成这部分工作。...举个例子：作者有一大爱好是看小说，大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。

2K10 1

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

目前主流的实现方式：（1）通过判断userAgent来跳转到不同页面完成不同设备浏览器的适配，即维护两个不同站点来根据用户设备进行相应的跳转；（2）使用media query媒体查询手段，让页面根据不同设备浏览器自动改变页面的布局和显示....col-2div> div class="col-3">.col-3div> div class="col-4">.col-4div> div> 屏幕适配布局屏幕适配布局是为了实现网页内容根据移动端设备屏幕大小等比例缩放所提出的一种布局计算方式...通常依据HTML中标签元素的zoom属性缩放和根据REM自适配方案实现等比例缩放。...（1）zoom属性控制方案如果希望在320px宽度屏幕上显示的内容在414px的宽度屏幕上进行等比例自动放大，可以考虑使用元素CSS的zoom属性来解决。...如果给HTML根元素一个根据屏幕自动调整的font-size，页面上所有元素的尺寸全部以rem为单位，无论屏幕宽度怎样变换，页面的内容和屏幕的比例将始终不变，实现了页面根据屏幕自动缩放。

1.1K3 1

CSS尺寸单位介绍

物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。...（device pixel radio） Retina屏幕所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。...，缩放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不论你怎么缩放当前页面，屏幕分辨率都不会改变我们知道在移动端可以在一定程度上控制用户的缩放行为，也可以禁止用户缩放 <meta name="viewport...0.5em; } div class="my-div"> 我是父级文字我是子级文字 div> html代码中，第一级，html的 font-size: 50px; 第二级，my-div

1.5K3 0

CSS尺寸单位介绍

物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。设备独立像素我上一张图，你就会理解什么是设备独立像素 ?...（device pixel radio） Retina屏幕所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。...，缩放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不论你怎么缩放当前页面，屏幕分辨率都不会改变我们知道在移动端可以在一定程度上控制用户的缩放行为，也可以禁止用户缩放 div class="my-div"> 我是父级文字我是子级文字 div> html代码中，第一级，html的 font-size: 50px; 第二级，my-div 的 font-size: 40px

1.7K2 0

简单粗暴的移动端适配方案 - REM

1.3 响应式布局通过媒体查询根据不同的屏幕分辨率来进行适配，响应式的问题在于：屏幕分辨率分区间：区间内无法进行区分，无法实现100%兼容，一般是用主流分辨率来进行划分；额外的工作量：响应式布局的工作都是需要开发者去实现的...{width: 20rem;} /* 20 * 16px = 320px*/ 看到这里你应该就会发现，只要我们根据不同屏幕设定好根元素的font-size，其他已经使用了rem单位的元素就会自适应显示相应的尺寸了...3.1 JS计算通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。...3.2 媒体查询既然只是为了根据屏幕宽度来设置元素的字体大小，那我们完全也可以通过css3媒体查询来完成这部分工作。...举个例子：作者有一大爱好是看小说，大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。

1.4K1 0

Bootstrap实用手册

，屏幕 320 * 480，分辨率：640 * 960 em : 父元素字体大小倍数 rem : 根元素(html)字体大小倍数 (3)....指定列在特定屏幕下不显示 A. .hidden-lg : 在 lg 下隐藏 B. .hidden-md : 在 md 下隐藏 C. .hidden-sm : 在 sm 下隐藏 D. .hidden-xs...内层：为或 data-toggle="dropdown" ：切换内容的显示和隐藏 (3)....响应式导航条当屏幕尺寸大于 768px 时候，可以正常显示出所有的内容，当屏幕尺寸小于 768px时候，一部分内容就会隐藏，通过点击弹出，响应式导航条由两部分组成. ①. class .navbar-header....navbar-collapse 折叠按钮，当屏幕大于 768px 正常显示，屏幕尺寸小于 768px隐藏，通过按钮点击完成展开显示注意：响应式导航条的结构——只有从手机屏幕才能看出来 ?

6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭