H5新特性
- canvas 元素
- 用于媒介回放的 video 和 audio
- 语意化更好的内容元素,比如 article、footer、header、nav、section
- 表单控件,calendar、date、time、email、url、search
- localStorage 长期存储数据,浏览器关闭后数据不丢失;能维持在多个会话范围内
- sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储,只能维持在当前会话范围内。
什么是viewport?
Viewprot是用户网页的可视区域,Viewprot翻译为中文可以叫做“视区”,
浏览器就想一个盒子一样,pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览,如果没有viewport定义浏览器的尺寸,想pc尺寸一样在手机浏览器上显示,布局可能就乱掉,或者先尺寸比例非常的不协调。
使用viewport元标签控制布局
<mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>
Width - 正整数或device-width - 定义视口的宽度,单位为像素
Height - 正整数或device-height - 定义视口的高度,单位为像素,一般不用
Initial-scale - [0.0-10.0] - 定义初始缩放值
Minimum-scale - [0.0-10.0] - 定义缩小最小比例,它必须小于或等于maximum-scale
Maximum-scale - [0.0-10.0] - 定义放大最大比例,它必须大于等于minimum-scale
User-scalable - Yes/no - 定义是否允许手动缩放,默认值yes
- 延伸提问 - 怎样处理 移动端 1px 被 渲染成 2px问题
- 局部处理
mate标签中的 viewport属性 ,initial-scale 设置为 1
rem按照设计稿标准走,外加利用transfrome 的scale(0.5) 缩小一倍即可; - 全局处理
mate标签中的 viewport属性 ,initial-scale 设置为 0.5
rem 按照设计稿标准走即可
- 局部处理
如何解决移动端屏幕尺寸适配问题
- 响应式布局
- 百分比布局
- rem布局
- 媒体查询
- vh和vw
- viewport
语义化的理解
- 用正确的标签做正确的事情!
- HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
- 在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解