CSS：div从屏幕某个位置开始到屏幕边缘结束且屏幕放大缩小时位置不变

已于 2023-04-19 14:16:46 修改
阅读量1.5k 收藏 4
点赞数
分类专栏： CSS 文章标签： css 前端
于 2023-04-18 10:39:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47105321/article/details/130216090
版权

首先，不能将宽度设置为屏幕宽度的百分比数，也不能在定位时使用百分比数字，因为随着屏幕放大缩小会更换位置
其次div的宽度要自适应屏幕放大缩小，一直到屏幕边缘，经过尝试选择了以下方式：
1、设置 一个有宽度的父元素，并设置position: relative;的定位属性
2、给子元素div（目标div）设置一个很大的宽度值，并设置position: absolute;的定位属性
3、给页面的根元素设置overflow: hidden;
主要代码如下：
在这里插入图片描述
在这里插入图片描述
效果如下：
在这里插入图片描述
实现item宽度适配可以使用vw作为宽度单位

snailerCode
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
始终在屏幕中间显示Div的代码(css+js)
10-28
如何始终在屏幕中间显示Div需要的朋友可以参考下。
盒子模型简单理解
yyn8888的博客
09-17 185
盒子模型 先记一下我觉得比较重要的东西 CSS的优先级 内联样式>ID 选择器>伪类>属性选择器>类选择器>元素（类型）选择器>通用选择器 行内元素，块元素，行内块元素之间的转换 display:inline; //块级元素（独占一行）变为行内元素–可以文本居中 display:block; //行内元素变为块级元素–可以设置宽高 display:inline-block; //其实仍是行内元素，但是可以设置width及height属性等 ----------------
vue pc项目怎么自适应页面布局，不用zoom属性将整个项目进行缩小根据分辨率自适应适配。
qq_54753561的博客
12-16 4636
vue pc项目怎么自适应页面布局，不用zoom属性将整个项目进行缩小根据分辨率自适应适配。由于项目是pc端的，已经成型了但是页面显得太大了，想把项目整体缩小一点，但是又不想调整所有的布局这可怎么办呢？ 在这里我有3个方案。推荐第3种方案。
浏览器窗口缩放后用css的zoom来保持比例(现在推荐transform）
createWrite的博客
04-24 4575
方法很简单： 1.以下代码就能实现zoom的计算通过实际浏览器大小与默认屏幕大小的比例获取 //高度计算zoom varpercentage,appHeight=768;//设置默认屏幕大小 percentage=window.innerHeight*100/appHeight; percentage=Math.floor(percentage)/100; do...
CSS3 Calc实现滚动条出现页面不跳动问题
09-24
calc是css3的一个新功能，用来指定元素的长度，calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动条出现页面不跳动问题，需要的朋友参考下吧
缩放页面不影响布局的方法
Y777C的博客
07-20 8230
关于浏览器缩放所引起的页面布局错乱
如何让网页的内容不随着网页的放大与缩小使网页布局发生错乱
热门推荐
weixin_52682014的博客
11-01 1万+
方法1：我们可以对全局和每一个div都写出宽和高来约束他 方法2：可以对主体内容设置一个最小宽度然后在里面固定宽高，这个宽度比电脑的宽度都低不少，一般为1000px左右。(不要忘记给每个大板块加 magin: 0 auto)
div根据屏幕缩放进行比例缩放
偷得浮生半日闲
08-13 3282
在一些视频类网站，视频的 div 宽度会跟随浏览器的大小进行比例缩放，一般来说，我们 div 设置宽度 100% ， 高度写死，宽度可以根据屏幕缩小而改变 div 的宽度，但是高度不会变化，如果想要 div 的高度也随着宽度的变化而变化呢？......
为什么css中用scale缩放之后，虽然内容缩小了，但是占用的空间却没有变化
wy3053的博客
08-12 3331
为什么css中用scale缩放之后，虽然内容缩小了，但是占用的空间却没有变化
css自适应布局，缩放保持图片比例
qq_48850466的博客
05-26 3085
css自适应布局，缩放保持图片比例
使用css使div占满整个屏幕的实现方法
09-22
主要介绍了使用css使div占满整个屏幕的实现方法，一种是使用定位方法另一种使用百分比，具体实例代码大家参考下本文吧
让DIV块在页面的某个位置固定的css代码
09-25
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
10-28
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合，需要的朋友可以参考下。
CSS特性
lan_da_wang的博客
04-29 368
化简代码，定位问题，解决问题。
nuxt3使用记录六：禁用莫名其妙的Tailwind CSS(html文件大大减小)
lsjweiyi的博客
04-29 451
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 819
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
【React】CSS 局部样式
小秀的博客
04-26 469
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 812
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
CSS 伪类、伪元素的应用实例：电池充电、高能进度条
最新发布
无解的菜鸟晖 的博客
04-30 964
本文通过 CSS 伪类、伪元素，结合动画 animation 和 Vue 动态样式属性（通过 CSS 变量）的写法，来实现电池充电、高能进度条的效果。 CSS 伪类是对当前元素下，处于某些特定状态时而添加特殊效果的样式（基于文档之外的抽象，所以叫伪类），不产生新元素，写法用单冒号（:）开头。 CSS 伪元素是对当前元素下，某些特殊部位应用样式，通过创建虚拟元素实现，一般与 content 属性一起使用（基于元素的抽象，所以叫伪元素），写法用双冒号（::）开头。CSS 变量 var() 用于插入自定义属性。
css屏幕放大缩小适配
09-25
CSS屏幕放大缩小适配可以通过transform属性的scale()方法来实现。使用scale()方法可以对元素进行缩放，从而实现屏幕的放大和缩小效果。在使用scale()方法时，可以指定缩放的比例，可以是小于1的值实现缩小，也可以是大于1的值实现放大。 另外，为了实现自适应的缩放效果，可以使用相对单位rem。rem是相对于根元素的font-size值的大小来计算的单位。通过将设计稿的单位转换为rem单位，可以实现等比例的自适应缩放。可以通过设置根元素的font-size值随窗口变化而调整来实现屏幕的放大和缩小适配。 以上就是CSS屏幕放大缩小适配的方法，希望对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值