meta视口标签 物理像素开发像素 多倍图 背景缩放 移动端技术css初始化

语法:

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

标准的viewport设置

设备宽度和设备保持一致         width=device-width  宽度为设备宽度

视口的默认缩放比例1.0           initial-scale=1.0  初始缩放比

不允许用户自行缩放                user-scalable=no" 用户是否可以缩放  Yes或no

最大允许缩放的比例为1.0       maximum-scale=1.0   最大缩放比

最小允许缩放的比例为1.0       minimum-scale=1. 0    最小缩放比

1开放像素=2物理像素(iphone8)

多倍图

2倍图

例:准备的图片放到手机屏幕上会进行缩放    50*50 放大后100*100

先写入100*100的图,限制宽高50*50,再放进手机屏幕,就不会模糊了

精灵图

在firework里面把精灵图等比例缩放为原来的一半

之后根据大小 测量坐标

注意代码 background-size也要写 精灵图原来宽度的一半

移动端CSS初始化  normalize.css

背景缩放 background-size

参数

宽度 高度         

高度可省略,省略后为等比例缩放

单位为px,%(相对于父盒子而言)

cover 完全覆盖整个盒子,可能有部分背景显示不全

contain 高度宽度等比例拉伸,当高度宽度其中一个铺满div盒子就不再拉伸(可能会有部分显示空白)

背景图片2倍图 同多倍图 准备100*100照片,盒子50*50,背景缩放50*50

发布了48 篇原创文章 · 获赞 3 · 访问量 875

猜你喜欢

转载自blog.csdn.net/procul/article/details/104836100