前端架构师之路03_移动端规范兼容处理

1 移动端页面制作规范

在这里插入图片描述

1.1 计量单位的使用

CSS 的计量单位选择

  • px:固定的像素值
  • em:相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值,如父节点的 font-size:10px,当前节点的 font-size:1.2em,则当前节点的 font-size 实为 12px
  • rem:相对根节点 html 的 font-size 设置来作为当前元素 1rem 所代表的像素值,与 em 的区别就是 rem 的基本度量单位与父节点无关,只与根节点 font-size 的设置有关,如设置 html{font-size:10px;} 后当前 dom 所有节点的 1rem 都表示 10px
  • vm/vh:表示视区宽度/高度,视区总宽度为 100vw,总高度为 100vh

移动端开发中我们使用 rem 作为基本计量单位,同时将根节点默认字号大小设为 font-size:62.5%,因移动端浏览器默认字号大小为 16px,16*62.5% 刚好为 10px

html {/* 相当于 10px */font-size: 62.5%;
}/* #example 的字体大小为 12px*/
#example {font-size: 1.2rem
}/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {font-size: 1.4rem;width: 10rem;height: 10rem
}
  • 安卓下<textarea>标签的内容字体大小不支持 rem 设置

1.2 移动端开发细节和优化

在移动端使用新的 CSS3 样式代替原来在 PC 上的开发习惯

  • 在宽度为100%的布局中,实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等考虑使用 flex 布局
  • 垂直居中使用 flex 实现垂直居中
  • 尽量使用 border-radius,box-shadow,text-shadow 等 CSS3 样式实现诸如圆角、渐变色、盒子投影、字体投影等,减少使用图片
  • 对于单色的 icon 图标,利用 字体图标 导入,这样的话,可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果(如投影)等,而不再需要每一种颜色就需要切一份图片
  • 利用 transform:rotate(90deg) 来获取旋转了不同角度的 icon,避免每个角度需要切一张图片
  • 在动画中,利用 CSS3 动画属性如 transform:translate(x,y) 来改变元素的偏移位置,减少使用 left 和 top 来做位移动画

2 图片模糊处理

理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。

对于高清屏而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以导致图片看起来比较模糊。

对于图片模糊问题,比较好的方案就是用多倍图片(@2x)

如:一个 200×300(CSS pixel)的 img 标签,对于 dpr=2 的屏幕,用 400×600 的图片,如此一来,位图像素点个数就是原来的4 倍,在高清屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例,图片自然就清晰了。

2.1 多倍图

多倍图的作用是为了使图片在移动端中正常清晰的显示。

叫多倍图的原因就是不同的移动设备屏幕分辨率不同。比如说:二倍图、三倍图、四倍图等,这些就是多倍图。这里介绍一下二倍图,其他的多倍图都是同样的原理。

2.1.1 二倍图

直接使用普通图片和使用二倍图呈现的图片的清晰度区别。直接使用原图片直接丢到移动端页面的,可以很明显的看出图片的边缘有锯齿状。

进行压缩通过二倍图方式显示的图片,相比之下则清晰了很多。这就是多倍图的效果。

二倍图实质就是使用原先位置大小二倍的图片进行填充,在进行放大后仍以正常清晰度显示。

2.2 SVG 矢量图

网页中的图片大部分都是基于像素处理的,当放大时会失真,变得模糊。

可缩放矢量图形(Scalable Vector Graphics,SVG)是一种开放标准的描述矢量图形的语言,它基于XML(可扩展标记语言)的,SVG 矢量图形是可伸缩的,可在任何的分辨率下被高质量地打印,可在图像质量不下降的情况下被放大。

2.2.1 SVG 标签和样式

SVG使用标签的方式定义各种图形,外层标签是 <svg>,viewBox可以定义用来观察SVG视图的一个矩形区域,它的属性主要包括x、y、width、height,用数字表示,每个数字之间用空格或逗号隔开,表示定义一个在左上角(x, y)坐标位置,宽度为width,高度为height的矩形。常用属性如表所示。

属性说明
width用来控制 SVG 视图的宽度
height用来控制 SVG 视图的高度
viewBox定义用户视野的位置及大小

<svg> 标签的内部,可以使用SVG提供的一些预定义的标签来绘制图形,或者绘制文字。常用的内部标签如表所示。

标签名说明
<rect>矩形标签
<circle>圆形标签
<ellipse>椭圆形标签
<line>线段标签
<polyline>折线标签
<polygon>多边形标签
<path>路径标签
<text>文字标签
<tspan>类似<span>,用在<text>内部单独设置样

SVG 常用的内部标签还可以通过属性来设置样式,常用的属性如表所示。

属性名属性值说明
fillString定义填充颜色以及文字颜色
fill-opacity0~1之间的浮点数定义填充颜色的透明度
strokeString定义描边的颜色
stroke-width大于0的浮点数定义描边的宽度
stroke-opacity0~1之间的浮点数定义描边的颜色的透明度
opacity0~1之间的浮点数定义整个图形元素的透明度
transformtranslate(x, y)平移
transformscale(x, y)缩放
transformrotate(angle, [cx, cy])旋转
transformskewX(angel) skewY(angel)倾斜
<!-- 定义一个圆形 -->
<svg width="100%" height="100%"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd"/>
</svg>
<!-- 定义一个外部svg -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
</svg>

3 练习作业

  • 使用多倍图解决移动端图片模糊问题。
  • 使用 SVG 实现矢量图引入。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么才是物联网领域最好的开发语言?

什么才是物联网领域最好的开发语言&#xff1f; 最好&#xff01;运行最快&#xff1f;开发最高效&#xff1f;最容易学习&#xff1f; 各有特点&#xff01; 采用C/C语言&#xff0c;运行最快&#xff0c;一般采用厂家提供的底层驱动支持包BSP&#xff0c;所有MCU都支持。如…

2009-2018年各省涉农贷款数据(wind)

2009-2018年各省涉农贷款数据&#xff08;wind&#xff09; 1、时间&#xff1a;:209-2018年 2、范围&#xff1a;31省 3、来源&#xff1a;wind 4、指标&#xff1a;涉农贷款 指标解释 &#xff1a;在涉农贷款的分类上&#xff0c;按照城乡地域将涉农贷款分为农村贷款和城…

Spring 学习(五)JavaConfig 实现配置

1. 使用 JavaConfig 实现配置 JavaConfig 是 Spring 项目的一个子项目&#xff0c;Spring 4 后成为核心功能。 注意&#xff1a; 如果开启包扫描&#xff0c;加载配置类以后就可以通过反射拿到配置类中的对象了。Bean 只写在方法上&#xff0c;返回的是一个对象&#xff0c;但…

Django的设计模式及模板层

Django的设计模式及模板层 设计模式MVC和MVT MVC 代表 Model-View-Controller(模型-视图-控制器)模式。 M 模型层(Model),主要用于对数据库层的封装 V 视图层(View),用于向用户展示结果 (WHAT HOW) C 控制(Controller&#xff0c;用于处理请求、获取数据、返回结果(重要) 作…

SpringMVC 学习(六)乱码问题

8. 乱码问题 网络编程中乱码绝大部分都与编码格式有关&#xff0c;常常在涉及到中文的文件编译或者数据传输中出现。 Spring MVC 使用 post 方式传输带中文数据时便会出现乱码&#xff0c;get 方式则不会&#xff0c;解决方式如下&#xff1a; (1) 自定义过滤器 过滤器 pu…

记录使用iText7查找PDF内容关键字坐标,加盖电子签名、印章

一、前言 项目以前签字都是由C端那边进行合成操作&#xff0c;最近项目要求把那块功能&#xff0c;由后端进行实现&#xff0c;其中包含坐标、关键字、任意位置进行签字操作&#xff0c;坐标是最容易实现的&#xff0c;曾经也写过类似的功能在&#xff08;添加图片印章到PDF&a…

如何做好测试?(三)功能测试 (Functional Testing, FT)

1. 功能测试的详细介绍&#xff1a; 功能测试 (Functional Testing, FT)&#xff0c;是一种软件测试方法&#xff0c;旨在验证系统的功能是否按照需求规格说明书或用户期望的方式正常工作。它关注系统的整体行为&#xff0c;以确保各个功能模块和组件之间的交互和集成正确。 …

Spring学习笔记3 Spring对IOC的实现

Spring学习笔记2 Spring的入门程序_biubiubiu0706的博客-CSDN博客 控制反转是一种思想 控制反转是为了降低程序耦合度,提高程序扩展力,达到OCP(开闭原则)原则,达到DIP(依赖倒置原则)原则 控制反转,反转的是什么? 1.将对象的创建权力交出去,交给第三方容器负责 2.对象与对象…

【Vue3 源码解析】nextTick

nextTick 是 Vue 3 中用于异步执行回调函数的函数&#xff0c;它会将回调函数延迟到下一个微任务队列中执行。其中&#xff0c;Vue 更新 DOM 是异步的。下面是对 nextTick 函数的详细解释&#xff1a; export function nextTick<T void, R void>(this: T,fn?: (this:…

某市住房公积金管理中心领导莅临创邻科技考察指导

近日&#xff0c;某市住房公积金管理中心&#xff08;以下简称“公积金中心”&#xff09;领导带队&#xff0c;一行6人莅临浙江创邻科技调研指导&#xff0c;创邻科技CEO张晨、COO吴菁、CTO周研作为代表接待来访并举行会谈。 该公积金中心一行此次莅临创邻科技考察调研&#…

【C#】Redis在net core下使用教程

系列文章 文章目录 系列文章前言一、Redis 简介1.1 Redis 优势1.2 Redis与其他key-value存储有什么不同&#xff1f; 二、Redis安装步骤2.1 下载链接2.2 安装测试 三、Redis修改帐户密码四、Redis写成Windows服务五、.net core - 使用CSRedisCore操作redis 前言 官方教程&…

ESP32设备通信-Mesh网络通信

Mesh网络通信 文章目录 Mesh网络通信1、ESP-MESH协议介绍2、ESP32与ESP8266组成ESP-Mesh网络应用介绍3、软件准备4、硬件准备5、代码实现在本文中,我们将介绍使用 painlessMesh 库和 ESP32/ESP8266 NodeMCU 使用 ESP-MESH 网络。 本文将重点介绍 Espressif 的 ESP-MESH 网络协…

【SQL】S0 系列博文大纲

系列博文大纲 SQL 学习环境建议系列博文相关书籍系列博文大纲阶段进展 SQL 学习环境建议 对于 SQL 语言的学习&#xff0c;博主本地使用&#xff1a;MySQL DataGrip&#xff1b; MySQL 提供本地数据库服务&#xff1b; DataGrip IDE&#xff0c;承担编程运行测试任务&#xf…

25814-2010 三聚氯氰 阅读笔记

声明 本文是学习GB-T 25814-2010 三聚氯氰. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了三聚氯氰的要求、采样、试验方法、检验规则以及标志、标签、包装、运输、贮存、安全、 安全技术说明书。 本标准适用于三聚氯氰的产品…

【go】字符串切片与字符串出入数据库转化

文章目录 需求代码入库出库 需求 将请求数据存入数据库与从数据库读取数据返回在出库不使用反序列化情况下 请求结构体 type NoticegroupsCreateReq struct {Name string json:"name" binding:"required"UserIds []string json:"user_ids…

ARM/X86工控机在轨道交通交通管理系统的应用(4)

交通管理系统 信迈XM-3000系列专为道路监控应用而设计。随着城市化的发展&#xff0c;道路车辆数目与日俱增&#xff0c;而道路监控对于时刻保障城市的安全是非常必要的。由于性能强大并支持宽温度工作&#xff0c;XM-3000系列成为交通管理系统应用的理想选择。 系统架构 交通…

服务网关Gateway_微服务中的应用

没有服务网关 问题&#xff1a; 地址太多安全性管理问题 为什么要使用服务网关 网关是微服务架构中不可或缺的部分。使用网关后&#xff0c;客户端和微服务之间的网络结构如下。 注意&#xff1a; 网关统一向外部系统&#xff08;如访问者、服务&#xff09;提供REST API。在Sp…

常用螺栓标准、规格、用途汇总表

螺栓 1 常用螺栓标准、用途 常用螺栓标准、规格、用途见表1。 表1 常用螺栓标准、规格、用途汇总表 注&#xff1a;1.冷镦工艺生产的小六角头螺栓具有材料利用率高、生产效率高、机械性能高等优点,但由于头部尺寸较小, 不宜用于多次装拆、被联接件强度较低和易锈蚀等场合。 2.…

印章篆刻小程序商城的作用是什么

印章的需求度也有很高市场需求&#xff0c;处理办公印章外&#xff0c;还有艺术类的&#xff0c;而对爱好者来说&#xff0c;需要找到一家靠谱的品牌制作&#xff0c;包括材料、样式、内容等都有较高要求&#xff0c;线上可以接触到更多雕刻商家。 而对品牌来说&#xff0c;需…

Chrome获取RequestId

Chrome获取RequestId 参考&#xff1a;https://help.aliyun.com/zh/redis/how-do-i-obtain-the-id-of-a-request 在浏览器页面按下F12键&#xff0c;打开开发者工具页面&#xff1b; 在开发者工具页面&#xff0c;单击Network(网络)&#xff1b; 在playload(载荷)窗口中找到目…