401节---------5月14日-----移动web开发
视口
就是浏览器显示页面内容的屏幕区域。
可以分为布局视口，视觉视口和理想视口。
布局视口
- 一般移动设备的浏览器都默认设置了一个布局视口，用来解决早起Pc端页面在手机上显示的问题
- ios，android基本都将这个视口分辨率设置为989px，所以PC上的网页大多都能在手机上显示，只是元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口
- 它是用户正在看到的网站的区域
- 我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口任然保持原来的高度
理想视口
需要手动添写mcta视门标签通知汶浏览器操作
meta视口际签的上要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们和局的视口就多宽
meta视口标签
<meta name="viewport" content="width=device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0">
| 属性 | 解释 |
|---|---|
| width | 宽度设置的是viewport宽度，可设置dcvice-width（设备宽度） |
| initial-scalc | 初始缩放比，大于0的数 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
二倍图
物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334
- 我们开发时候的1px不是一定等于1个物理像素的
- PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
- Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩在体块屏幕里，从而提高分辨率
多倍图
- 对于一张50px*50px的图片,在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 通常使用二倍图，因为iPhone 6\7\8的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
- 背景图片注意缩放问题
背景缩放background-size
语法：
background-size：背景图片宽度 背景图片高度；- 只写一个参数，肯定是宽度，高度省略了，会等比例缩放
- 里面的单位可以为%，是 相对于父盒子来说的
- 单位长度、百分比，cover、contain
- cover等比例拉伸，要完全覆盖盒子，可能有部分图片显示不全
- contain高度和宽度等比例拉伸，当宽度\高度铺满盒子后就不再拉伸，可能有部分空白区域
移动端开发选择
- 单独制作移动端页面（主流）
- 通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
- 响应式页面兼容移动端（其次）
- 通过判断屏幕宽度来改变样式，以适应不同终端
移动端技术解决问题
CSS初始化 normalize.css
保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档
CSS3盒子模型 box-sizing
- 传统盒子模型宽度计算：盒子的宽度=CSS中设置的width+border+padding
- CSS盒子模型：盒子宽度=CSS中设置的宽度width里面包含了border和padding。即CSS3中的盒子模型宽度width不会撑大盒子了
移动端技术选型
单独制作移动端页面常用
- 流式布局（百分百布局）
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端常用
- 媒体查询
- bootstarp
401节---------5月14日-----移动web开发相关推荐
- 10月14日笔记交叉开发开发板连接，远程登录和tftp服务器配置
1.开发板的链接 电源: 网线:不用的时候可以不接 串口:用来开发板通信 你们使用SecureCRT的界面是你们开发板的终端界面 右键此电脑 ->管理- ...
- 【历史上的今天】2 月 14 日：第一台通用计算机面世；IBM 诞生；Julia 公开发布
整理 | 王启隆 透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2022 年 2 月 14 日,在 1819 年的今天,打字机和第一台 QWERTY 布局键盘的发明者克里斯托弗· ...
- 【历史上的今天】2 月 14 日：第一台通用计算机面世；IBM 成立；Julia 公开发布
整理 | 王启隆 透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2023 年 2 月 14 日,在 1819 年的今天,打字机和第一台 QWERTY 布局键盘的发明者克里斯托弗· ...
- En-Tan-Mo（ETM）项目周报（6月14日~6月20日）
亲爱的ETM小伙伴: 近日, Facebook发布数字货币Libra, 是伟大征途还是飞蛾扑火? 区块链革命还是全球骗局? Anyway, ETM首席科学家Dr.Aaron Yuan是这样看的: 不可 ...
- 超燃2022昭通首届国际烟花节，2月14日起盛大开燃门票免费送
怎样的精彩才能为春节留下美好回忆? 昭通庆新春,迎来超级大盛会 2月14日起昭通将迎来超燃国际烟花节 百米巨幅燃放阵线,感受国内超大型烟花盛会 中.法.俄.韩四国超***烟花设计团队联合演绎 漫天诗 ...
- 11月14日，西安，听说有一节百度AI快车道课程在等你上车
他们拥有比其他人更坚韧的耐力,他们对技术充满激情,他们可雷打不动同一坐姿保持整天,他们技能值与发量常常成反比,他们最讨厌的人是八阿哥(bug).他们可不是什么新物种,而是代码世界的"挑战者& ...
- 七夕节王者荣耀服务器维护,王者荣耀8月14日维护更新公告 20181七夕活动内容介绍...
在王者荣耀中,为了让玩家们更好的体验游戏.王者荣耀将于8月14日对游戏进行维护更新,本次更新将上线大家期待已久的2018七夕活动.千万别错过了哦,下面就和小编一起去看看吧. 王者荣耀8月14日维护更新 ...
- 2019年1月14日【第一天正式学习】
2019年1月14日星期一 任务一.把 elfpass 拷贝进 seed 虚拟机,设成 root 所有 suid 程序,用普通用户去攻击获得 root权限.可以先静态分析,搞不定再用 gdb 动态调试 ...
- 3月14日dnf服务器维护,DNF体验服3月14日更新介绍 肝深渊送爆肝王称号！
DNF体验服在3月14日更新全新活动,本次活动奖励总体来看还是非常不错的.例如账绑称号.异界气息清除书.锻造炉等超值奖励,下面让我们来看具体的更新内容吧. PS:本次体验服更新内容将会在3月22日更新 ...
最新文章
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
- Kafka创建查看topic，生产消费指定topic消息
- c语言的32个关键词
- 变压器符号_行输出变压器的结构、符号及电路分析
- 2014-01-01
- hooks的常用Api
- SHT1x/SHT7x数字温湿度传感器驱动编写
- Linux命令：SAMBA配置与win10共享
- 18Python标准库系列之logging模块
- 基于python和酷Q的QQ机器人开发实践（1）
- 彐一夕儿本铺_2019-10-16汉字宫目录
- 激荡20年，芯片产能从零起步到反超美国，中国制造的又一大成就
- Hadoop大数据原理(3) - 分布式计算框架MapReduce
- 海思HI3516板子初体验
- win10哪里看计算机配置,Win10如何查看电脑配置信息？
- 电子科技大学计算机复试综面,2018年电子科技大学考研复试分数线已公布
- SQL Server(MSSQLSERVER)无法启动问题解决
- 苹果手机html5 播放器,酷狗全新iPhone版HTML5播放器发布
- 渡一教育js- 10原型，原型链，call/apply
- DELTA并联工业机器人