- 2025-01-09H5页面移动端适配问题小计-1
在开发H5页面时，iOSSafari浏览器常常会遇到页面内容被底部工具栏遮挡的问题。这不仅影响用户体验，还可能导致一些功能无法正常使用。最典型的就是safari将底部的工具栏也认为是视窗的一部分，所以会出现底部被遮挡的情况： 1.使用CSS调整页面高度1.1通过CSS媒体查询调整高度可
- 2025-01-07env(safe-area-inset-bottom) 兼容写法
先看下兼容性： 可以看到@supports兼容性很好，所以使用@supports做兼容是个不错的选择。例： @supports(padding-bottom:env(safe-area-inset-bottom))or (padding-bottom:constant(safe-area-inset-bottom)){ .your-dom{ padding-bottom:constant(safe-are
- 2024-11-27css 判断在支持某些属性的情况下再添加样式
:root{--safe-area-inset-top:0px;--safe-area-inset-right:0px;--safe-area-inset-bottom:0px;--safe-area-inset-left:0px;--safe-area-inset-constant-top:0px;--safe-area-inset-constant-right:0px;--safe-area-inset-constant-bottom:0px;
- 2024-11-27css 实现刘海屏样式兼容并支持 js 获取刘海屏高度后动态修改
css:root{--safe-area-inset-top:0px;--safe-area-inset-right:0px;--safe-area-inset-bottom:0px;--safe-area-inset-left:0px;--safe-area-inset-constant-top:0px;--safe-area-inset-constant-right:0px;--safe-area-inset-constant-bottom:
- 2024-09-26CSS——边框过渡效果
CSS——边框过渡效果今天浅浅的水一下边框过渡效果。按钮边框过渡效果小小的解释一波这里采用了一个外围的容器盒子，为了实现容器盒子的水平居中（这个简单）和垂直居中（这个就稍微复杂一些，往后可能会出一期专门设置垂直居中的文章），我还是请出了Flex弹性盒子，真的是太好
- 2024-09-10数码管钟（可复制源代码）
效果演示源代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>数码管钟</title&
- 2024-08-28CSS (border-radius应用) 笔记 08
border-radius: n1 n2 n3n4 /a1 a2 a3 a4 【n1-a1，n2-a2，n3-a3，n4-a4 分别表示上右下左顺序边角的椭圆边角，其中n代表水平，a代表垂直】e.g有趣的小水滴动画（应用）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname=&qu
- 2024-06-08Tailwindcss Layout布局相关样式及实战案例，5万字长文，附完整源码和效果截图
aspect相关样式类基础样式ClassPropertiesaspect-autoaspect-ratio:auto;aspect-squareaspect-ratio:1/1;aspect-videoaspect-ratio:16/9;案例：引入B站视频Usetheaspect-*utilitiestosetthedesiredaspectratioofanelement.使用’aspect-*'实用工
- 2024-05-31CSS中inset属性详细讲解
CSS中的inset属性是一种用于定位和调整非static定位元素的缩略属性。它是四个单独属性的简写，这些属性是top、right、bottom和left。通过inset属性，可以同时设置这些属性的值，简化代码书写。1.属性语法inset属性的语法如下：/*单个值*/inset:<length>|<perce
- 2024-04-16移动端安全区域适配方案
前言什么是安全区域？自从苹果推出了惊艳的iPhoneX，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域犹如手机的“神秘面纱”，遮挡了一部分屏幕，给开发者带来了新的挑战。Android似乎对iPhon
- 2024-04-01CSS3制作图片样式
问题：如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。解决方法：要让浏览器能正常渲
- 2024-02-29使用safe-area-inset-*来适配iPhoneX的刘海屏及底部横条区域
之前一直沿用同事写的媒体查询处理这个问题，所有固定在底部展示的按钮栏都要用媒体查询来定义距离底部的距离，着实不太方便，而且媒体查询比较有局限性，不太可能把市面上所有机型都适配一遍。刚好要处理折叠屏适配问题，重构了一个复杂页面的布局，就找到了使用safe-area-inset-*来适配iPh
- 2024-02-21面操作
内插面即向内缩小缩小一圈快捷键：i键（inset）选择一个面选择inset工具鼠标放在圆圈处，鼠标按下，往里拖拽微调在菜单下面或微调面板，可以勾选外插操作。即向外扩展一圈。更多操作inset,同时选择外侧（微调面板）选择多个面，同时inset操作各面（各个面独立做内插面的意思）尖分
- 2024-01-09适配 iphone 底部刘海
在需要适配的页面，元素增加样式。特有的变量safe-area-inset-bottom\safe-area-inset-bottom建议这种通用性设置，提供一个基础公共组件page.通过定义插槽nav\header\main\footer插入内容。这是一些公共的样式就不用每个页面去设置。.footer{padding-bottom:0;
- 2023-12-08CSS 网页适配 iPhone全面屏
前言iPhoneX取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部fixed定位的元素）。 适配之前需要
- 2023-08-23uniapp专栏——屏幕安全区域
写在前面这些内容是在通过cli搭建的uniapp中，使用了vite4,ts4.9,vue3（组合式API,setup语法糖）。如果有版本不一致，请谨慎参考。正文css方式UNI提供的安全区CSS常量获取上安全距离(安全区域距离顶部边界的距离)：env(safe-area-inset-top)获取左安全距离(安全区域距离左边边界的
- 2023-08-17position简化
.some-element{position:absolute;inset:0;}如果你对 top 、 right 、 bottom 和 left 有不同的值，你可以按照如下的顺序分别设置它们： inset:-10px0px-10px0px 。这种简写方式与margin 的工作方式相同。
- 2023-07-2236种漂亮的CSS3网页按钮Button样式
<!DOCTYPEHTML><htmllang="en-US"><head><metacharset="UTF-8"><title>36种漂亮的CSS3网页按钮Button样式</title><styletype="text/css">body{background:#f5
- 2023-07-11h5设置ios安全距离
首先要在html里面加这个viewport-fit=cover，不加无效<metaname="viewport"content="width=device-width,initial-scale=1.0,viewport-fit=cover">csspadding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);
- 2023-04-09CSS3边框属性 阴影 box-shadow 属性
box-shadow属性各个参数的含义值说明h-shadow必需的。水平阴影的位置。允许负值 v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离，使用类似高斯模糊的算法将阴影进行模糊处理，模糊后阴影的范围将扩大，扩大的距离为blur/2spread可选。阴影的大小：在原
- 2023-04-06小程序兼容ios底部小黑条
env()和constant()，是IOS11新增特性，用于设定与边界的距离，一共有4个变量：safe-area-inset-left：距离左边边界的距离safe-area-inset-right：距离右边边界的距离safe-area-inset-top：距离顶部边界的距离safe-area-inset-bottom：底部边界的距离在IOS11.2以前，可以使用constant()
- 2023-03-23css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配
转载:https://www.cnblogs.com/jiaoshou/p/16647577.html使用苹果官方推出适配方案css函数env()、constant()来适配苹果官方推荐使用env()，constant()来适配，建议使用该方
- 2023-02-05css box-shadow单边阴影设置
box-shadow参数说明box-shadow:h-shadowv-shadowblurspreadcolorinset h-shadow（X轴）必需第一个长度值指明了阴影水平方向的偏移，即阴影在x轴的位置。值为正数时
- 2023-01-23css inset属性
inset属性说明如下：inset属性用作定位元素的top、right、bottom、left这些属性的简写。类似于margin和
- 2023-01-15css inset属性
inset属性说明如下：inset属性用作定位元素的top、right、bottom、left这些属性的简写。类似于margin和padding属性，依照“上右下左”的顺序。举个例子：inset:0;