移动端的开发-视口-适配

于 2019-07-03 19:38:21 发布
阅读量410 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ifubing/article/details/94588843
版权

在这里插入图片描述

比较电脑端与手机端的效果

在这里插入图片描述

在这里插入图片描述

可见，电脑端很大的图，移动上看就很小了

不太好看

再看一次

大图的时候

在这里插入图片描述

显示到手机上时，被等比例缩小了

在这里插入图片描述

不希望有这样子的效果

设置视口

手机设备会有自己的宽和高

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

大一点的图，适配一下，让它变小，看效果

在这里插入图片描述

在这里插入图片描述

例子

开发网页时

在这里插入图片描述

美工给图的尺寸

在这里插入图片描述

750刚好是iphone六的一倍

在这里插入图片描述

前端按照手机的情况先把尺寸按照比例放大的做好

用于手机端的时候，再缩小。页面就清晰不混乱。

不仅仅图片缩放，背景图也需缩放

在这里插入图片描述

让背景图适配

在这里插入图片描述

如果不适配，图片按原始大小显示，适配后，会缩放

本例中背景图片按照.box盒子的宽高适配，结果

就是图片刚好和盒子尺寸一样大小，完成了适配

适配前

在这里插入图片描述

图片太大了

适配后

在这里插入图片描述

使用了length适配，参数宽高

也可以使用百分比

background-size: 宽百分比 高百分比

在这里插入图片描述

auto，背景图真实大小

cover效果

在这里插入图片描述

父级整体的盖住图片

在这里插入图片描述

contain

让容器可以把图片全部展现出来

在这里插入图片描述

小结，移动端有一个视口的概念，还有一个retina屏适配的概念

鲸鱼编程pyhui
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值