Web端-视口+二倍图

于 2023-09-28 08:35:48 发布
阅读量34 收藏
点赞数
分类专栏： Web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49553751/article/details/133375381
版权

视口：

  • 显示HTML网页的区域，用来约束HTML尺寸

二倍图

  • 概念：设计稿里面每个元素的尺寸的倍数
  • 作用：防止图片在高分辨率屏幕下模糊失真
  • 现阶段设计稿惨开iphone6/7/8,设备宽度375px产出设计稿
  • 二倍图设计稿尺寸750px

救救孩子吧8༼⍤༽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web开发学习笔记——视口、二倍图
lxy95512的博客
02-10 432
视口( viewport )就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。 布局视口layout viewport 一般移动设备的浏览器都默认设置 了一个布局视口用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视C分辨率设置为980px所以PC上的网页大多都能在手机上呈现,不 过元素看上去很小, 一般默认可以通过手动缩放网页。 视觉视口visual viewport 字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
手机端-图片切换-banner图滚动响应式
07-16
"手机端-图片切换-banner图滚动响应式" 主要涉及以下几个关键知识点： 1. **响应式设计**：响应式设计是现代网页和应用开发中的核心概念，它确保内容能够适应不同尺寸和方向的屏幕，提供一致的用户体验。在手机端的...
前端一倍图、二倍图、多倍图
热门推荐
wgod
07-25 2万+
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。 这里是引用 设备像素:也叫物理像素，显示设备上最微小的物理部件。 比...
CSS关于二倍图的使用
xiaozhuo_tang的博客
02-09 1万+
实际工作中可能会得到二倍图，但我们需要的是一倍图的尺寸显示在网页，有N张图的情况下我们不可能去调节每一张图故可以通过transform:scale进行缩放 transform-origin:left top; transform:scale(0.5); 但此时原本的盒子大小不会变化，会留下一大片空白 这个时候我们可以使用zoom，zoom会改变到盒子的大小，不过可能会有性能问题，这个时候...
html页面视口,web移动端---视口viewport
weixin_33117093的博客
06-04 1158
视口viewport视口viewport： 简单点说就是用来预览网页的窗口。又分为以下两大类：pc端视口：就是浏览器的可视区域。移动端视口：当前设备的屏幕区域。一、 pc端视口：1.在PC端,浏览器窗口大小会影响HTML大小,进而影响网页布局2. 在PC端视口其实就是我们浏览器大小(在PC端,视口可以影响HTML元素大小)二、移动端视口：1.视觉视口visual viewport ：眼睛看...
web移动端-视口是什么
weixin_54902466的博客
05-10 236
文章目录前言一、视口是什么二、视口单位vh与vw介绍(了解) 前言 学习移动端的必须要了解的知识点!-视口 一、视口是什么 视口：手机网页的大小 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> name：要设置的属性，viewport表示视口 content：要设置的内容 width=device-width：设置视口宽度与设备宽度一致 initial-s.
移动WEB开发之流式布局--视口
薛定谔的猫
11-11 133
视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽想要理想视口，我们需要给我们的移动端页面添加 meta视口标签。
移动web开发--移动端基础、视口、二倍图
shirlyran的博客
07-10 538
1移动端基础 .1.1浏览器现状 国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端浏览器，处理webkit内核浏览器即可。 1.2手机屏幕现状 现在移动端设备无论是Android还是iPhone，屏幕尺寸非常多，碎片化严重，分辨率也不同。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。 1.3常见移动端屏幕尺寸 1.4移动端调试方法 Chrome Dev
h5c3---移动WEB开发---移动端基础、视口、二倍图---8.14
weixin_50768118的博客
08-14 242
移动端基础、视口、二倍图、移动端开发选择、移动端技术解决方案
移动端布局三种视口_CSS 移动端WEB开发之流式布局-视口
weixin_29464593的博客
01-12 582
二、css 视口视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口2.1 布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动...
mi - 框架填充图片版本_ｗｅｂ_
10-03
在IT行业中，"mi - 框架填充图片版本_ｗｅｂ_"这一标题暗示了我们正在讨论一个针对网页端的框架，可能是用于小米智能生活平台的开发工具或组件。这个框架可能着重于图片处理和展示，特别是对于智能生活场景中的图片...
Lemonds-Web2-Homework1
04-13
【标题】"Lemonds-Web2-Homework1" 是一个关于Web开发的课程作业，其中重点关注了CSS（层叠样式表）的应用。这个作业可能是为了帮助学生深入理解和实践CSS在构建网页布局、设计样式以及提升用户体验方面的关键作用。...
web实例-漫步时尚广场源码
05-24
6. **图片优化**："漫步时尚广场"项目中可能包含大量的图片文件，学习者可以从中学习如何优化图片以减少加载时间，例如使用恰当的文件格式（JPEG、PNG或SVG）、压缩图片大小以及利用CSS精灵技术。 7. **文件组织**...
Web-App开发入门.docx
12-04
例如，`<meta>`标签的使用对于Web App在移动设备上的表现至关重要，如设置视口(`viewport`)、启用全屏模式(`apple-mobile-web-app-capable`)、状态栏样式(`apple-mobile-web-app-status-bar-style`)以及防止自动识别...
性能~问题业务场景稳定性测试
07-25
1
《AI大模型应用》--百度AI 文心一言.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
b112日常办公用品直售推荐系统-springboot+vue.zip（可运行源码+sql文件+）
最新发布
07-25
日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 日常办公用品直售推荐系统是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
Android个性化书架应用构建.rar
07-25
Android个性化书架应用构建
移动WEB端开发实践：京东首页模仿
这篇web期末大作业主要涉及移动WEB端开发，具体是针对京东移动端首页的模仿实现。在实际的Web开发中，移动优先的设计策略越来越重要，因为越来越多的用户通过手机和平板设备访问互联网。这个项目旨在让学生掌握响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值