移动端特点(重点)~~~

1 移动端特点

PC端

屏幕大，网页固定版心
浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）

移动端

手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

2 物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

3 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。设备有多宽，我的网页就显示有多宽

4 视口标签

有了视口标签，可以达到我们想要的理想视口。

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

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

5 二倍图

其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

网页美工的设计稿基本是 750px
我们前端工程师拿到设计稿利用像素大厨选择 2X，进行缩小一半，按照提示的单位开发即可。

移动端特点(重点)~~~相关推荐

移动端 c++ 开发_这 10 点值得移动端开发重点学习
大家好,我是拭心,最近有朋友问我:"安卓开发是不是没人要了,除了画 UI 别的都不会怎么办?" 考虑到这可能是很多人共同的疑问,决定简单写一下. 不是安卓开发没人要了,是初级安卓没 ...
语雀桌面端技术架构实践
作者:易芝林(维骏) 语雀桌面端作为语雀为用户提供的生产力工具,上线两年多来一直保持高频的迭代和健康的业务增长.本次主要介绍我们在做桌面端时的一些技术架构思考和实践,同时也将分享我们沉淀的一些通用桌面 ...
B端产品-定义、分类、竞品分析、与C端产品的区别
转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址:https://blog.csdn.net/pcaxb/article/details/108297678 B端产品-定 ...
2023 年大淘宝 Web 端技术概览
本文介绍了大淘宝 Web 领域的工程师们正在做哪些技术工作.有什么技术产品. 背景 2022 年,大淘宝前端团队进行了调整:重新组织生产关系,按业务线拆分整合进对应的业务技术团队,同时保留了大前端虚线 ...
每日一书丨《百万在线》罗培羽：服务端入门不该陷进网络编程
刚毕业到游戏公司工作时,项目组用了纯C++技术方案,主管丢给一本400+页的<TCP/IP详解>,说啃完它就算入门了.可是对于毕业生而言,看这种书就像在看字典,看了很久也写不出有实际意义的 ...
B端产品经理的心得之如何搞定客户
做了几年的B端产品经理深刻感受到B端产品经理和C端产品的区别,现总结一些心得,希望对转型B端产品经理的人有些帮助. 首先B端产品经理不同于C端产品的一个重大的区别在于,B端产品在产品和用户之前多了一个 ...
新科重点用能单位能耗在线监测系统方案
一.平台建设背景国家政策 2017.09.28,国家发展改革委.质检总局关于印发<重点用能单位能耗在线监测系统推广建设工作方案>的通知: 2018.05.10,国家发展改革委环资司和国家 ...
高并发架构系列：如何从0到1设计一个MQ消息队列
消息队列作为系统解耦,流量控制的利器,成为分布式系统核心组件之一. 如果你对消息队列背后的实现原理关注不多,其实了解消息队列背后的实现非常重要. 不仅知其然还要知其所以然,这才是一个优秀的工程师需要具 ...
也许，DOM 不是答案
有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的. 人们提到"移动互联网"的时候,其实专指另外一样东西:手机App. 一.Web ...

移动端特点(重点)~~~

1 移动端特点

2 物理分辨率和逻辑分辨率

3 视口

4 视口标签

5 二倍图

移动端特点(重点)~~~相关推荐

最新文章

热门文章