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

最新推荐文章于 2024-10-04 22:04:56 发布
原创 最新推荐文章于 2024-10-04 22:04:56 发布 · 469 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

不太好看

再看一次

大图的时候

在这里插入图片描述

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

在这里插入图片描述

不希望有这样子的效果

设置视口

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

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

例子

开发网页时

在这里插入图片描述

美工给图的尺寸

在这里插入图片描述

750刚好是iphone六的一倍

在这里插入图片描述

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

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

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

在这里插入图片描述

让背景图适配

在这里插入图片描述

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

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

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

适配前

在这里插入图片描述

图片太大了

适配后

在这里插入图片描述

使用了length适配，参数宽高

也可以使用百分比

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

在这里插入图片描述

auto，背景图真实大小

cover效果

在这里插入图片描述

父级整体的盖住图片

在这里插入图片描述

contain

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

在这里插入图片描述

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

移动端布局三种视口_移动端适配之视口和meta标签
weixin_29999895的博客
01-15 503
这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。不管三七二十一，我们先新建一个页面：这不是一个demo*{margin: 0; padding: 0;}div{height: 100px; background: red;}在谷歌浏览器下，我们可以看到不同手机的适配情况：iPhone5下图片描述图片描述可以看出，不管是i5/i6/i6plus下，div的宽度...
毕业设计-摩托车汽车制造公司网站模板(自适应手机移动端)-整站商业源码.zip
最新发布
05-16
在移动端适配方面，该模板遵循响应式设计原则，利用媒体查询、流式布局、弹性图片和视口设置等技术，实现了网站在不同移动设备上的完美显示。这样的设计使得用户在手机端访问网站时，能够自动调整布局，提供与电脑端...
移动端视口介绍
weixin_45846980的博客
11-08 861
视口(viewport) 是用来约束网站中最顶级块元素的，它决定了html的大小 pc端设备 参照浏览器窗口的大小，视口不大重要 //获取视口 var clientWidth = document.documentElement.clientWidth; var clienthight = document.documentElement.clientHight; 视口对pc端影响 1.如果确定具体的宽高值，当超出viewport的大小的时候，会出现滚动条 2.如果设置的宽度为100%,当子元素宽高大于父
移动端适配——视口概念
m0_73861113的博客
11-01 384
三分钟带你搞懂：移动端适配中视口概念
移动端三个视口
weixin_30788619的博客
07-06 432
转载：http://www.cnblogs.com/wmmang-blog/p/4708351.html 本文记录学到的有关视口的内容，不足之处请指正。 1、视口 有时会使用百分比来声明宽度,如： html,body{} div{width:30%;} 假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度...
移动端中的视口
admin_djp的博客
11-10 751
文章目录前言三种视口1.布局视口2.视觉视口3.理想视口 前言     在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口、视觉视口和理想视口。 三种视口     移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设
CSS第九章 移动端布局-Viewport视口/移动端适配方案
晓葉斑比
06-04 2154
Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器 切换平台之后，一定要重新刷新浏览器 访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。 访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
在移动端开发中，使用百分比单位（%）代替固定像素（px）可以帮助创建更加灵活的布局。百分比单位可以根据视口大小自动调整，从而确保元素在不同设备上都能适配。 5. **viewport-fit属性** 更新的CSS属性`...
Vue移动端项目-电子书阅读器.zip
10-21
- **Intersection Observer API**：检测元素是否进入或离开视口，用于优化移动端滚动性能。 3. **电子书阅读器功能** - **书籍列表**：展示可用电子书，可能通过API获取。 - **阅读界面**：显示电子书内容，支持...
H30-html手机网站-网页源码移动端前端-H5模板-自适应响应式源码.zip
12-25
为了让网页在移动端有良好的显示效果，CSS中可能会用到各种媒体查询和视口（viewport）设置。 3. JavaScript文件：用于增强网页的交互性，如处理表单提交、图片轮播、滑动菜单等动态效果。 4. 图片素材：包括网站的...
移动端视口
weixin_60146725的博客
10-29 510
视口分哪些？ 1.视觉视口 ：意思显而易见 就是视觉可以看的到得， 2.布局视口：写html代码时内容布局得宽高。 1.视觉视口
移动端开发之视口
HXL521666的博客
11-08 378
视口：浏览器显示页面内容的屏幕区域。 视口的分类：布局视口、视觉视口、理想视口。 为了解决早期PC端网页在手机上显示的问题，移动端浏览器都默认设置了一个布局视口。 IOS、Android基本都将布局视口分辨率设置为980px，所以PC上的网页大多也能在手机上呈现，但是网页元素看上去会非常小，一般可以通过手动缩放网页。 视觉视口 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 理想视口 发明者：史蒂夫.
【移动端】Viewport 视口
小秀的博客
10-04 2171
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
移动端的视口viewport
chenrongwei92的博客
10-08 1106
移动端的视口viewport涉及三个视口: 布局视口（Layout Viewport） 视觉视口（Visual Viewport） 理想视口（Ideal Viewport） 布局视口（Layout Viewport）: 移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使那些不是为移动设备设计的网站(为PC端设计的网站)。 由于移动设备的屏幕比PC的宽小很多，如果以浏览器的可视区域作为viewport， 则那些为PC端设计的网站放到移动设备上显示时，必然会因为移动设备的viewport..
移动端视口（viewport）和布局
weixin_39288299的博客
05-22 499
视口 两种像素： 物理像素和 CSS 像素。 物理像素：设备屏幕的物理像素。 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。 三个视口： 布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport） 布局 ...
移动端布局 - 视口
qq_33962481的博客
06-01 253
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
移动Web：Flex布局、移动端适配、视口、二倍图
孤安先生的博客，作者主站正在重构中，敬请期待！
11-04 680
系统会将视口的宽度和高度分为100份，1vw 就占用视口宽度的百分之一，1vh 就占用视口高度的百分之一。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。动态单位，会随着 html 根元素字体大小的变化而变化（相对单位）。不会随着视口的大小变化而变化，像素是一个固定的 (绝对) 单位。动态单位，会随着参考元素字体大小的变化而变化（相对单位）。动态单位，会随着网页视口大小的变化而变化（相对单位）。动态单位，永远跟着元素的父元素作为参考进行计算。设置给项目，不是给容器。
Web移动端开发：视口，布局视口 layout viewport，视觉视口 visual viewport，理想视口 ideal viewport
我就知道你会来，我们一起进步吧！
03-10 679
1.视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鲸鱼编程pyhui

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

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

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

打赏作者

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

抵扣说明：

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

余额充值