1.二倍图1.1 物理像素&物理像素比物理像素指的是屏幕的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8是750*1334我们开发时候的1px不是一定等于1个物理像素的PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比1.2 背景缩放background-size语法：background-
转载
2023-07-13 11:23:17
269阅读
在移动端开发中，iOS设备上的刘海屏设计给开发者带来了一些兼容性挑战。刘海屏是近年来智能手机设计的一大趋势，而在布局时如何兼容这一屏幕特性则尤为重要。这篇文章将详细介绍如何解决“移动端iOS刘海兼容样式”的问题，确保我们的应用能够在不同的设备上良好展示。
### 环境准备
为了开始实现刘海屏兼容样式，我们需要做好环境准备。首先，要确保使用的框架与工具能够适配iOS的刘海屏。以下是依赖安装的指南
移动端 iOS 兼容样式的编写方案
## 1. 项目背景
随着移动设备的普及和移动应用的快速发展，开发移动端应用成为了一个重要的任务。在移动端开发中，iOS 平台拥有庞大的用户群体，因此确保应用在 iOS 平台上能够良好兼容成为了一个关键问题。本文将提出一种方案，介绍如何编写移动端 iOS 兼容的样式。
## 2. 方案概述
为了实现移动端 iOS 兼容样式的编写，我们需要考虑以下几个方面
原创
2024-01-22 06:54:46
81阅读
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决var oHeight = $(document).height(); //浏览器当前的高度 KaTeX parse error: Expected '}', got 'EOF' at end of input: …function(){ if((document).height() < oHeig
转载
2024-05-22 16:43:02
113阅读
移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS中设置的px是逻辑像素,这就造成1px变成物理像素的2px或者3px，比如2 倍屏，设备的物理像素要实现 1 像素，所
原创
2021-11-20 19:19:27
668阅读
css属性相关 宽和高width属性可以为元素设置宽度。height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。字体属性文字字体font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 简单实例：body { font-family: "Microsoft Ya
pc-reset PC样式初始化 /* normalize.css */ html { line-height: 1.15; /* 1 / -ms-text-size-adjust: 100%; / 2 / -webkit-text-size-adjust: 100%; / 2 */ } body ...
转载
2021-10-13 16:13:00
479阅读
2评论
1.前言先吐槽一下，刘海屏真丑。然而作为苦逼的开发者，还是要去适配刘海屏的。好了，吐槽完毕，进入正题。 这里主要是介绍一下Android P中刘海屏的适配以及Android P之前的适配。为什么要分开呢？因为Android P之前官方还没提供API来进行适配，都是由各家厂商来提供适配方案的。2.Android P中的刘海屏适配2.1 Google对刘海屏的支持介绍Google将刘海屏命名为屏幕缺口
转载
2023-11-15 22:18:17
242阅读
一些移动端浏览器的兼容性Bug
做移动端的Web也有一段时间了，踩过的坑真心不少。下面列出一些，移动端浏览器兼容性的Bug，供大家参考。 【UC浏览器】video标签脱离文档流场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0
css3盒子模型 box-sizing:border-box; -webkit-box-sizing:border-box; 点击高亮我们需要清除 设置为transparent 完成透明 -webkit-tap-highlight-color:transparent; 在移动端浏览器默认的外观在io ...
转载
2021-08-12 20:27:00
335阅读
2评论
常用样式
原创
2020-05-12 14:20:18
691阅读
在开发中，css样式有一些属性往往需要重复使用，为了避免代码冗余，降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】，随着这些工具的流行，CSS变量也开始规范制定，目前很多浏览器都已经支持了，css变量的兼容性： 变量的定义：CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，
转载
2024-01-08 22:36:32
145阅读
负责一个项目pc端的，再上线以后呢，想兼容移动端。用同一套页面 1.方法1 定义视口窗口，简单，可以在手机上看到一个缩小版的pc端
原创
2022-07-06 11:50:40
847阅读
/*点击高亮显示清除*/ -webkit-tap-hightlight-color:transparent; -webkit-appearance:none; /*禁用长按页面时弹出菜单*/ img,a{-webkit-touch-callout:none;} 移动端技术选型： 单独的移动端页面：1
原创
2022-06-27 10:51:53
92阅读
移动端适配相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。在移动端我们经常可以在head标签中看到这段代码：<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />通过meta标签对viewport
转载
2024-06-17 11:55:03
255阅读
web移动端布局范畴很广，其中比较基础的几个话题：移动端适配1px border基础布局本文主要分享这三个话题一、移动端适配提起移动端适配，大家想到的肯定是rem、flexible.js，本文要分享的方案是 vw + rem对移动端适配不熟悉的同学，可以看看：使用Flexible实现手淘H5页面的终端适配再聊移动端页面的适配如何在Vue项目中使用vw实现移动端适配vw 是什么？vw 是基于视图(V
转载
2024-09-22 14:49:55
522阅读
我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下：vue-cli默认已经安装以上三个插件：postcss
移动端导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：1px 问题UI 图完美适配方案iPhoneX 适配方案高清屏图片模糊问题…接下来我们从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理一、英寸一般用英寸描述屏幕的物理大小，如电脑的 13、16，手机显示器的 4.8、5.7 等使用的单位都是英寸。需要注意，上面的尺寸都是屏幕对角线的长度： 英寸(i
float 有三个属性left，righ，none 在使用float时需要注意的是float是相对于下个元素的，如两个div，第一个div float:right那么两个div就会在同一行上，第二个div会出现在右边。当然一个容器内只有一个元素的话也可以使用float，不过这样效果就类似于text-align了。 1 * html h2 {
2
3
转载
2024-10-21 14:59:00
13阅读
最近两个做了一个展示试卷信息，选项等,并在前端页面打分 把分数与选项传进数据库，并且可以点击回显。 页面功能：我的试卷是代表着用户已做完的试卷，点击会弹出组件展示已做完试卷的信息（测试数据就放了一个，他里面还集成了下拉加载） 在首页点击继续考试或者开始考试弹出做题组件 接下来上代码(后台返回的测试数据) 首页html代码<tem
