当前位置: 首页 > news >正文

移动端开发那些事

1px解决方案

为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的.
根据这篇文章http://www.cnblogs.com/2050/p/3877280.html的分析, 手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, 上面的meta实际上是设置了ideal viewport的宽度.
以实际举例: iphone3和iphone4的屏幕宽度分别是320px,640px, 但是它们的ideal viewport的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不同手机的ideal viewport宽度是不一样的, 常见的有320px, 360px, 384px. iphone系列的这个值在6之前都是320px, 控制viewport的好处就在于一套css可以适配多个机型.
看懂的人应该已经明白 1px变粗的原因了, viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.:

解决方案

1.0 小数数值表示px media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 }
}

缺点: 安卓和低版本ios不支持

2.0 :before, :after与transform
.radius-border{position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){.radius-border:before{content: "";pointer-events: none; /* 防止点击触发 */box-sizing: border-box;position: absolute;width: 200%;height: 200%;left: 0;top: 0;border-radius: 8px;border:1px solid #999;-webkit-transform(scale(0.5));-webkit-transform-origin: 0 0;transform(scale(0.5));transform-origin: 0 0;}
}
3.0viewport + rem 实现

同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时,输出viewport:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3时,输出viewport:

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

参考使用Flexible实现手淘H5页面的终端适配

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35438.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

Hibernate对实际数据进行操作

//增 public static void main(String[] args){ Configuration cfg null; SessionFactory sf null; Session session null; Transaction ts null; User u new User(); System.out.println("请输入用户信息:&quo…...

GCC的-Wl,--wrap编译选项

GCC的--wrap是一个链接器选项&#xff0c;假如我们要编译的源文件为main.c&#xff0c;编译命令如下&#xff1a; gcc main.c -Wl,--wrapfunc -o main.elf有以下效果&#xff1a; 如果符号func没有&#xff08;在当前源文件&#xff09;定义&#xff0c;就链接到__wrap_func如…...

个人技能点(郎)

个人技能点1. 熟悉 h5 和 c3 新特性&#xff1a;语义化标签&#xff0c;flex 布局&#xff0c;动画等H5 新特性&#xff1a;2. 熟悉js作用域、原型、事件轮询机制、闭包等原理&#xff1b;js 作用域闭包事件轮询机制原型3. 熟悉 ES6 语法标准 promise&#xff0c;async/await 异…...

【Android 11】使用Android Studio调试系统应用五):编译Settings 模块、解决编译错误

文章目录 1. 篇头语2. 系列文章3. 关联Git4. 完善Settings的依赖4. 1 Android.bp回顾4.2 提取出所需androndx支持库4.2.1 依赖列表(android.bp)4.2.2 转换后的列表(build.gradle)4.2 提取出所需aar库4.3 提取出依赖的本地jar包4.3.1 查找本地jar包的位置4.3.2 所需jar列表(ando…...

1.5 异常

什么是异常 异常就是在程序运行期间&#xff0c;因为某些原因导致程序出现了错误的情况。 异常封装了三个重要信息: 类型&#xff0c;信息&#xff0c;行号 异常的简单继承结构 Throwable |- Error 系统级别的错误&#xff0c;无法处理&#xff0c;只能停止运行 |- Excepti…...

[HCIP] 10 - IGMP 协议

一、IGMP 介绍 二、组播组管理协议工作机制&#xff1a;...

海大09-10.3题:编程计算并输出1*2+3*4+5*6+...+(n-1)*n的值,其中,n的值由键盘输入。(8分)

题目 本题是中国海洋大学《C语言程序设计》2009-2010年第一学期编程题第3题。 题目&#xff1a; 编程计算并输出12345*6…&#xff08;n-1&#xff09;*n的值&#xff0c;其中&#xff0c;n的值由键盘输入。&#xff08;8分&#xff09; 以下是本篇文章正文内容&#xff0c;欢…...

DEDE织梦如何做中英文多语言站

说道中英文站&#xff0c;是很多用户想用dedecms织梦程序做多语言站&#xff0c;下面网分享下做中英文多语言版本的站点如何操作&#xff0c;希望能帮助到大家。 一、首先在后台建栏目&#xff0c;有三点需要注意 1.需要做几种语言就加几个大的栏目。 2.栏目“常规选项”的文…...

2021-08-23 linux的部分基本命令与vi/vim的部分命令

linux的基本命令 文章目录linux的基本命令前言一、APT(Advanced Packing Tool)1.工作原理2.修改源3.几个常用的命令二、vi/vim一. vi/vim 模式1.vi有两种工作模式二. vi/vim 命令1.vim:退出命令2.vim删除与修改命令3.vim拷贝与粘贴命令4.vim 撤销命令5.vim 搜索命令6.vim 替换命…...

题解报告:m10

找abc(add) 问题描述&#xff1a; 有两个正整数集合{An},{Bm}&#xff0c;其中整数值均不超过106。输出正整数x&#xff0c;判断是否存在A中的一个数a与B中的一个数b的和为x。 输入格式&#xff1a; 第一行为正整数t(≤5)&#xff0c;表示数据组数&#xff1b;每组数据中&a…...

VISSIM二次开发(Python)大作业总结2

VISSIM二次开发&#xff08;Python&#xff09;&大作业总结2 写在前面 前一小节已经概括了基本所有这次使用的二次开发的知识&#xff0c;在这一小节&#xff0c;我们主要介绍本文对.att文件的读取和绘图以及分析的工作。 在这一部分我们将展开对这一部分的介绍&#xf…...

sql中grant授权语句revoke撤销语句

MySQL 赋予用户权限命令的简单格式可概括为&#xff1a; grant 权限 on 数据库对象 to 用户 一、grant 普通数据用户&#xff0c;查询、插入、更新、删除 数据库中所有表数据的权利 grant select on testdb.*to common_user%; grant insert on testdb.*to common_user%; gran…...

QT如何设置小程序不被重复启动多个该程序

添加互斥锁 判断 如果进程有该程序&#xff0c;则return不运行 #if defined Q_OS_WIN32 //for win #include <windows.h> bool checkOnly() {// 创建互斥量HANDLE m_hMutex CreateMutex(NULL, FALSE, L"fortest_abc123" );// 检查错误代码if (GetLas…...

jquery--动画效果

show() : 显示隐藏的匹配元素。 这个就是 show( speed, [callback] ) 无动画的版本。如果选择的元素是可见的&#xff0c;这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;&#xff0c;这个方法都将有效。 hide()&#xff1a…...

SVN错误:Previous operation has not finished;run “cleanup“ if it was interrupted.

问题分析&#xff1a; SVN报错以上错误&#xff0c;可能是修改本地的文件之前没有update&#xff0c;导致commit的时候产生冲突&#xff0c;致使SVN崩溃&#xff0c;陷入clean up 死循环。 svn 的 operation是存放在 "work queue" 里的。而 "work queue"…...

【力扣1044. 最长重复子串】二分查找+Rabin-Karp 字符串编码、后缀数组(Python3)

题目描述 https://leetcode-cn.com/problems/longest-duplicate-substring/ 思路题解 方法一&#xff1a;二分查找Rabin-Karp 字符串编码 https://leetcode-cn.com/problems/longest-duplicate-substring/solution/zui-chang-zhong-fu-zi-chuan-by-leetcode/ class Solut…...

政产学研各界推动软件和信息技术服务业增速发展

​日前&#xff0c;工业和信息化部发布的最新数据显示&#xff0c;上半年&#xff0c;我国软件和信息技术服务业业务收入呈加快增长态势&#xff0c;完成软件业务收入44198亿元&#xff0c;同比增长23.2%&#xff0c;近两年复合增长率为14.7%。 从利润水平来看&#xff0c;上半…...

java16语言新特性

新语言特性 JEP 394&#xff0c;适用于 instanceof 的模式匹配模式匹配&#xff08;Pattern Matching&#xff09;最早在 Java 14 中作为预览特性引入&#xff0c;在 Java 15 中还是预览特性。模式匹配通过对 instacneof 运算符进行模式匹配来增强 Java 编程语言。模式匹配使程…...

JavaScript-DOM、BOM对象

DOM对象 功能&#xff1a;控制html文档的内容 1、获取页面标签(元素)对象&#xff1a;Element 方法&#xff1a;document.getElementById(“id值”)&#xff1a;通过元素id获取元素对象、 2、操作Element对象&#xff1a; 1&#xff09;. 修改属性值&#xff1a; 明确获取的对…...

Vue 路由导航

...

Redis 分布式锁原理

1、 使用数据结构&#xff1a;string 2、 使用操作命令 Redis 字符串(String) // 只有在 key 不存在时设置 key 的值。成功返回1&#xff0c;失败返回0SETNX key value// 将值 value 关联到 key &#xff0c;并将 key 的过期时间设为 seconds (以秒为单位)。SETEX key seconds …...

蓝绿发布、灰度发布和滚动发布

一文搞懂蓝绿发布、灰度发布和滚动发布 应用程序升级面临最大挑战是新旧业务切换&#xff0c;将软件从测试的最后阶段带到生产环境&#xff0c;同时要保证系统不间断提供服务。 长期以来&#xff0c;业务升级渐渐形成了几个发布策略&#xff1a;蓝绿发布、灰度发布和滚动发布…...

隐私保护与生成模型: 差分隐私GAN的梯度脱敏方法

一、差分隐私是什么&#xff1f; 这篇文章以差分隐私和生成模型为主要研究对象&#xff0c;针对面临的问题&#xff0c;先介绍相关的背景知识和现有研究方法&#xff0c;后展示解决方案和实验结果。 机器学习模型的训练需要大量的数据喂食&#xff0c;而这些数据的应用就会涉…...

洛谷P1449 后缀表达式进阶解法

#include<iostream> #include<stack> #include<string>using namespace std;stack <int> expr; string temp; char ch; int first, second;int main() {for (;;){cin >> ch;switch (ch){case(.):expr.push(stoi(temp));temp "";brea...

Python_Flask 模板复用 继承

这里写目录标题什么情况下使用模板继承标签代码基础模板&#xff1a;复用 模板继承 * include 宏 什么情况下使用模板继承 1.多个模板具有完全相同的顶部和底部 2.多个模板具有相同的模板内容&#xff0c;但是内容中部分不一样 3.多个模板具有完全相同的模板内容 标签 {% …...

C++ STL基本组成(6大组件+13个头文件)

STL 是由容器、算法、迭代器、函数对象、适配器、内存分配器这 6 部分构成&#xff0c;其中后面 4 部分是为前 2 部分服务的&#xff0c;它们各自的含义如下表所示。 STL的组成含义容器一些封装数据结构的模板类&#xff0c;例如 vector 向量容器、list 列表容器等。算法STL 提…...

AndroidStudio自动下载 jxbrowser 卡住解决办法

最近更新了 Android Studio到 Arctic Fox 版本后&#xff0c;打开项目会自动下载 jxbrowser &#xff0c;但是这个插件是 Google 的&#xff0c;正常是不能下载成功的&#xff0c;虽然不影响开发&#xff0c;但一直出现下载状态挺难受 解决方法很简单 就是设置代理 找到设置 …...

RF高速电路的电源走线方式

作者&#xff1a;Roger Bremer&#xff1b;Tracey Chavers&#xff1b;Zhongmin Yu Maxim射频产品部 转自硬件十万个为什么公众号 射频(RF)电路的电路板布局应在理解电路板结构、电源布线和接地的基本原则的基础上进行。本文探讨了相关的基本原则&#xff0c;并提供了一些实用的…...

取消b站充电鸣谢!!!

按下F12在控制台输入&#xff1a; $(video)[0].onended()>{$(.bilibili-player-video-btn-next).click()}...

模拟电路笔记

Chapter 4 diodes Ideal Diode two modes on and offmode 1 reverse bias open cktmode 2 forward bias short cktshould be desing to limitcurrent flow & voltage across Rctifier ckt concert AC waves inot DC Assumed States Method Assume the diodes to...

密码学(期末复习版)

文章目录第一章 引言第二章 流密码第三章 分组密码第四章 公钥密码第五章 数字签名第六章 哈希函数第七章 认证技术第八章 秘钥分配与秘钥管理第九章 密码协议第十一章 密码学新方向综合第一章 引言 清楚信息安全专业学习密码学的原因 信息安全研究的内容很多&#xff0c;它涉…...

http协议之digest(摘要)认证,详细讲解并附Java SpringBoot源码

目录 1.digest认证是什么&#xff1f; 2.digest认证过程 3.digest认证参数详解 4.基于SpringBoot实现digest认证 5.digest认证演示 6.digest认证完整项目 7.参考博客 1.digest认证是什么&#xff1f; HTTP通讯采用人类可阅读的文本格式进行数据通讯&#xff0c;其内容非…...

pikachu靶场-upload-速通

upload-速通client checkMIME typegetimagesizeclient check 最简单的&#xff0c;先上传一张含有一句话木马的图片格式&#xff0c;抓包修改图片后缀为php&#xff0c;放包发送就行 访问并确认该上传文件是否以php形式解析 蚁剑直连&#xff1a; MIME type 后端php检查上…...

excel如何免费批量转换成pdf?这个方法太好用了

大家都知道&#xff0c;我们办公过程中建立各种表格都喜欢用excel软件&#xff0c;特别是那些人事部的同事&#xff0c;当我们将数据存储好之后&#xff0c;因为担心他人修改我们的数据&#xff0c;所以一些朋友会选择将excel文件转换成比较难以编辑的pdf文件。那么excel如何转…...

Excel是什么软件?免费的吗?

现在日常办公&#xff0c;离不开Excel表格&#xff0c;Excel是什么软件呢&#xff1f;实质上Excel是office软件中的一个小分支&#xff0c;现在市面上的office软件也琳琅满目&#xff0c;软件功能参差不齐&#xff0c;使用一款好用的office&#xff0c;能够大大提高我们的工作效…...

免费Excel教程 价值8800元的office Excel教程 表格教程 免费Excel教程 合并单元格

上学的时候CSDN的老师就推荐我们用&#xff0c;CSDN面博客&#xff0c;现在依然希望能够延续下这个习惯&#xff0c;分享一些有价值的内容在CSDN。 最近做一些报表&#xff0c;但是放下N多时间的Excel 已经下饭了&#xff0c;幸好有原来的一份教程&#xff0c;现在分享给大家。…...

java excel 背景_Java设置Excel背景

码农公社 210.net.cn 210是何含义&#xff1f;10月24日是程序员节&#xff0c;1024 210、210既210之意。Java 设置Excel表格颜色背景(即指定单一颜色作为背景色)、图片背景(即加载图片设置成页面背景)。程序中需要使用免费版Excel类库工具 Free Spire.XLS for Java来辅助实现…...

利用免费Excel控件来制作Excel报表

我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能&#xff0c;寻找实现这个功能的控件的任务分配给了我&#xff0c;通过百度搜索我找到了一个免费的控件&#xff0c;它是由E-iceblue公司推出的spire.xls控件&#xff0c;接下来的一段时间我尝试地创建了多个应用…...

html如何添加阿里图标,CSS引入阿里iconfont图标步骤

CSS引入阿里iconfont图标步骤第一步选择图标&#xff0c;选择添加入库第二步没有项目就新建一个项目下载项目文件&#xff0c;复制粘贴到你的WEB项目目录中回到网页&#xff0c;点击查看在线链接复制代码到你的index.html定义使用iconfont的样式.iconfont{font-family:"ic…...

MySQL进阶

文章目录数据库约束NULL约束UNIQUE&#xff1a;唯一约束DEFAULT&#xff1a;默认值约束PRIMARY KEY&#xff1a;主键约束FOREIGN KEY&#xff1a;外键约束表的设计——一对一、一对多、多对多增删改查进阶聚合函数Group by分组having:分组后的条件过滤联合查询内连接外连接自连…...

基于Halcon学习的一维码识别【十三】ean13.hdev

读取EAN-13型条形码 总代码&#xff1a; *创建模板 create_bar_code_model ([], [], BarCodeHandle) CodeType : EAN-13 * dev_close_window () dev_open_window (0, 0, 544, 496, black, WindowHandle) set_display_font (WindowHandle, 16, mono, true, false) dev_set_col…...

php ean13,php生成EAN_13标准条形码实例_php实例

function EAN_13($code) {//一个单元的宽度$lw 2;//条码高$hi 100;// the guide code is no coding,is used to show the left part coding type//// Array guide is used to record the EAN_13 is left part coding type//$Guide array(1>AAAAAA,AABABB,AABBAB,ABAABB,A…...

条码规范——EAN13

EAN-13 BACKGROUND INFORMATION EAN-13, based upon the UPC-A standard, was implemented by the International Article Numbering Association (EAN) in Europe. This standard was implemented mostly because the UPC-A standard was not well designed for internation...

php ean13,php生成EAN_13标准条形码实例_PHP教程

function EAN_13($code) {//一个单元的宽度$lw 2;//条码高$hi 100;// the guide code is no coding,is used to show the left part coding type//// Array guide is used to record the EAN_13 is left part coding type//$Guide array(1>AAAAAA,AABABB,AABBAB,ABAABB,A…...

一维码EAN 13简介及其解码实现(zxing-cpp)

一维码EAN 13&#xff1a;属于国际标准条码, 由13个数字组成&#xff0c;为EAN的标准编码型式(EAN标准码)。依结构的不同&#xff0c;EAN条码可区分为&#xff1a;1&#xff0e; EAN 13码: 由13个数字组成&#xff0c;为EAN的标准编码型式(EAN标准码)。2&#xff0e; EAN 8码…...

vs2019_qt6.2.4_dcmtk3.6.7_vtk9.2.2_itk5.3_opencv4.6.0编译记录

目录 1 dcmtk3.6.7编译 2 vtk9.2.2编译 3 itk5.3编译 4 opencv4.6.0 5 参考链接 编译顺序&#xff0c;qt6.2.4下载----->dcmtk3.6.7----->vtk9.2.2----->itk5.3----->opencv4.6.0 opencv4.6需要使用到vtk9.2.2&#xff0c;需要在最后编译。 opencv遇到…...

流程图怎样绘制?绘制流程图使用什么工具好?

流程图的也是图表的一种展现格式&#xff0c;其中可能介绍的是某件事情的操作流程&#xff0c;可能是某件事情的解决方法&#xff0c;总之使用流程图都可以进行很好地解决&#xff0c;那流程图要怎样绘制&#xff0c;使用什么软件进行操作呢&#xff1f; 现在随着网络技术的发…...

Android入门第41天-Android中的Service(bindService)

介绍 在前一天我们介绍了Android中有两种启动Service的方法。并擅述了startService和bindService的区别。同时我们着重讲了startService。 因此今天我们就来讲bindService。bindService大家可以认为它是和Android的一个共生体。即这个service所属的activity如果消亡那么bindS…...

png图片转base64

<img idiii load"abc" src"../aseets/bottom.png" > <canvas id"canvas"></canvas>abc(){var canvasdocument.getElementById(canvas)var imgdocument.getElementById(iii)var ctxcanvas.getContext("2d")var he...

unity sprite保存成PNG图片

图集拆分后可以将子图单独保存成png图片&#xff0c;使用如下代码&#xff0c; var sprites Resources.LoadAll<Sprite>("main"); Debug.Log("拆分的图片如下:"); var path "D:/Splite/"; if (!Directory.Exists(path)) {Directory.Crea…...