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

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

不太好看

再看一次

大图的时候

在这里插入图片描述

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

在这里插入图片描述

不希望有这样子的效果

设置视口

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

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

例子

开发网页时

在这里插入图片描述

美工给图的尺寸

在这里插入图片描述

750刚好是iphone六的一倍

在这里插入图片描述

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

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

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

在这里插入图片描述

让背景图适配

在这里插入图片描述

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

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

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

适配前

在这里插入图片描述

图片太大了

适配后

在这里插入图片描述

使用了length适配，参数宽高

也可以使用百分比

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

在这里插入图片描述

auto，背景图真实大小

cover效果

在这里插入图片描述

父级整体的盖住图片

在这里插入图片描述

contain

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

在这里插入图片描述

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

鲸鱼编程pyhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
移动端布局三种视口_移动端适配之视口和meta标签
weixin_29999895的博客
01-15 440
这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。不管三七二十一，我们先新建一个页面：这不是一个demo*{margin: 0; padding: 0;}div{height: 100px; background: red;}在谷歌浏览器下，我们可以看到不同手机的适配情况：iPhone5下图片描述图片描述可以看出，不管是i5/i6/i6plus下，div的宽度...
CSS第九章 移动端布局-Viewport视口/移动端适配方案
晓葉斑比
06-04 1862
Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器 切换平台之后，一定要重新刷新浏览器 访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。 访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检
移动端视口介绍
weixin_45846980的博客
11-08 780
视口(viewport) 是用来约束网站中最顶级块元素的，它决定了html的大小 pc端设备 参照浏览器窗口的大小，视口不大重要 //获取视口 var clientWidth = document.documentElement.clientWidth; var clienthight = document.documentElement.clientHight; 视口对pc端影响 1.如果确定具体的宽高值，当超出viewport的大小的时候，会出现滚动条 2.如果设置的宽度为100%,当子元素宽高大于父
手机端的适配（重点）
最新发布
m0_65696193的博客
07-19 853
根据W3标准 ，em 单位是相对于使用em单位的元素的字体大小( 也是相对于字体大小，有可能是父亲的元素也有可能是自身的元素字体大小 )每个网页默认都会有一个**视口**，视口其实是一个**虚拟的窗口** ，**移动端**默认的尺寸是**980**像素;使用em单位时，像素值是em值乘以使用em单位的元素的字体大小( `像素px=em值 * fontSize大小`)为了兼容移动设备，一般让**网页视口的宽度和设备的宽度的比例为 1:1 , 并且不允许用户缩放网页**;
移动端适配——视口概念
m0_73861113的博客
11-01 295
三分钟带你搞懂：移动端适配中视口概念
移动端三个视口
weixin_30788619的博客
07-06 373
转载：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 664
文章目录前言三种视口1.布局视口2.视觉视口3.理想视口 前言     在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口、视觉视口和理想视口。 三种视口     移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
在移动端开发中，使用百分比单位（%）代替固定像素（px）可以帮助创建更加灵活的布局。百分比单位可以根据视口大小自动调整，从而确保元素在不同设备上都能适配。 5. **viewport-fit属性** 更新的CSS属性`...
Vue移动端项目-电子书阅读器.zip
10-21
- **Intersection Observer API**：检测元素是否进入或离开视口，用于优化移动端滚动性能。 3. **电子书阅读器功能** - **书籍列表**：展示可用电子书，可能通过API获取。 - **阅读界面**：显示电子书内容，支持...
移动端适配 - HTML meta viewport属性说明
ld395353765的博客
05-28 2093
利用meta标签对viewport进行控制 　 移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。 　　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中： <meta name="viewport" conte...
详解vue移动端项目的适配(以mint-ui为例)
10-18
在开发Vue移动端项目时，适配问题至关重要，以确保应用能在不同尺寸的设备上正常显示。本篇文章将基于Mint-UI库详细讲解如何进行移动端适配。 首先，使用`vue-cli`创建项目骨架，这一步是搭建Vue项目的基础，但在...
移动端视口
y1815151的博客
10-25 148
视口分: 视觉视口： 眼在页面上看到的内容 布局视口：写html代码时的布局宽高 1、布局视口： <style> header{height: 50px ; background: pink; margin-bottom: 10px;} aside{width: 30%; background: red; height: 300px; float: left;} article{width: 68%; background: pink; height: 30...
移动端的视口viewport
chenrongwei92的博客
10-08 978
移动端的视口viewport涉及三个视口: 布局视口（Layout Viewport） 视觉视口（Visual Viewport） 理想视口（Ideal Viewport） 布局视口（Layout Viewport）: 移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使那些不是为移动设备设计的网站(为PC端设计的网站)。 由于移动设备的屏幕比PC的宽小很多，如果以浏览器的可视区域作为viewport， 则那些为PC端设计的网站放到移动设备上显示时，必然会因为移动设备的viewport..
移动端视口（viewport）和布局
weixin_39288299的博客
05-22 430
视口 两种像素： 物理像素和 CSS 像素。 物理像素：设备屏幕的物理像素。 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。 三个视口： 布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport） 布局 ...
移动端布局 - 视口
qq_33962481的博客
06-01 191
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
移动Web：Flex布局、移动端适配、视口、二倍图
孤安先生的博客，作者主站正在重构中，敬请期待！
11-04 528
系统会将视口的宽度和高度分为100份，1vw 就占用视口宽度的百分之一，1vh 就占用视口高度的百分之一。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。动态单位，会随着 html 根元素字体大小的变化而变化（相对单位）。不会随着视口的大小变化而变化，像素是一个固定的 (绝对) 单位。动态单位，会随着参考元素字体大小的变化而变化（相对单位）。动态单位，会随着网页视口大小的变化而变化（相对单位）。动态单位，永远跟着元素的父元素作为参考进行计算。设置给项目，不是给容器。
Web移动端开发：视口，布局视口 layout viewport，视觉视口 visual viewport，理想视口 ideal viewport
我就知道你会来，我们一起进步吧！
03-10 454
1.视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
浅谈移动端中的视口，前端开发学习计划
2401_84094029的博客
04-06 731
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鲸鱼编程pyhui

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

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

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

打赏作者

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

抵扣说明：

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

余额充值