摘要:这个问题的解决方案有很多,个人觉得最简单方面的还是大漠大大的一种解决方案。
先科普一下,HTML5并不是一项技术,而是一个标准。移动端的适配方案
所以其实要么我们是作为理论派讨论HTML5标准,要么是作为实践派讨论HTML5标准在某浏览器的应用。
H5 实际上是一个解决方案,一个看起来酷炫的移动端onepage网站的解决方案
rem适配
优点:
1. 引用简单,布局简便 2. 根据设备屏幕的DPR,自动设置最合适的高清缩放 3. 有效解决移动端真实1px问题
但是绝不是每个地方都要用rem,rem只适用于固定尺寸!
在这里rem也是一种单位,并且可以为咱们的布局提供无线的变化,根据开发者的设定,它将会在不同的分辨率屏幕上展示不同的色彩。
这个单位的定义和em类似,不同的是em是相对于父元素,而rem是相对于根元素,当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素字体大小的两倍,如果html的font-size为12px,那么这个2rem的元素font-size就是24px。
html {font-size: 12px;} h1 { font-size: 2rem; } 2*12 = 24px html {font-size: 16px;} h1 { font-size: 2rem; } 2*16 = 32px
单位 | 定义 | 特点 |
---|---|---|
rem | font size of the root element | 以根元素字体大小为基准 |
em | font size of the element | 以父元素字体大小为基准 |
当然上边只是我们介绍rem简单的示例,具体运用到项目中我还需进行rem的计算,根据根元素的font-size通过Javascript来计算我们的rem单位适配
选取一个设备宽度作为基准,设置其根元素大小,其他设备根据此比例计算其根元素大小。比如使得iPhone6根元素font-size=16px。
设 备 | 设备宽度 | 根元素font-size/px | 宽度/rem |
---|---|---|---|
iPhone5 | 320 | 计算 | - |
iPhone6 | 375 | 16 | 23.4375 |
iPhone7 | 375 | 16 | 23.4375 |
iPhone7plus | 414 | 计算 | - |
根元素fontSize公式:width/fontSize = deviceWidth/deviceFontSize
下方为动态计算 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + "px" } else { document.addEventListener("DOMContentLoaded", setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 console.log(rem) docEl.style.fontSize = rem + "px" } setRemUnit() // reset rem unit on page resize window.addEventListener("resize", setRemUnit) window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement("body") var testElement = document.createElement("div") testElement.style.border = ".5px solid transparent" fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines") } docEl.removeChild(fakeBody) } }(window, document))
上方的代码则是本人经常使用的rem计算方法,我们可以根据我们自己的需求设定基于多大的屏幕以及rem的换算倍率等
百分比方案使用百分比布局大部分是可行的,它会让布局随着屏幕的大小自动缩放,而且不用写太多的css样式,以及js相关的计算操作,但是文字就存在非常大的问题了,由于文字是固定大小,在屏幕dpr变化的时候,文字的CSS像素不变,就导致了文字在页面中的占位发生了变化。这样的结果就是,文字过多或者屏幕dpr过小的时候,会发生溢出;但是如果按照小屏幕为基准,又会发生字体太小这种情况。vw方案
百分比在当前移动端适配排版的时候,更多地会作为section级别元素的兼容排版。这个也要和设计稿中的效果相关,如果设计稿中要求一个元素定宽,那么就直接用px来保证宽度就可以了。
vw也是css的单位,1vw相当于1%,比如:浏览器视口尺寸为370px,那么 1vw = 370px * 1% =6.5px(浏览器会四舍五入向下取7),
我们来看看vw的浏览器和手机的兼容性问题
浏览器
手机
在移动端 iOS 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持
vw自身将整个可见视口横向分成了100份,每一个单位就是1vw,这个单位最大的优势就是在移动端的时候,无论是竖屏或者横屏,vw永远都是针对于横向的,比rem的方案好在当屏幕大小发生变化(顺便兼容了以后的可调节屏幕大小的移动设备[手动斜眼])的时候,不会让页面崩掉。
对于移动设备来说,比如iphone6+的375pxCSS像素宽度,1vw就等于3.75px,通过这个单位可以解决上面的依赖于脚本绑定根元素font-size的问题,在竖屏和横屏下面都有比较好的效果
$w-base: 375px $w-base-design: 750px @function px2vw($px) @return ($px / $w-base-design) * 100vw
虽然vw可以得到很好的支持,但是不会得到视觉稿原本的像素值了。在后期进行维护的时候会增加很多很多很多麻烦,前期打怪爽,后期装备维护难
淘宝移动端适配方案淘宝
移动端事件click:单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件移动端常见问题
1px问题
大家都知道我们再写web端适配的时候还需要兼容ie浏览器,这是因为浏览器的内核都不一样,而且我们的屏幕大小,屏幕厂商也是不一样,时常会发生缺少像素或者多像素现象,其实手机也一样屏幕大小不一,浏览器也是各式各样,拿iphone6为例,其dpr(device pixel ratio)设备像素比为2,css中一个1x1的点,其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px,在iPhone6 Plus下甚至会显示成3px。
这个问题的解决方案有很多,个人觉得最简单方面的还是大漠大大的一种解决方案。
使用postcss-write-svg插件
利用meta标签对viewport进行控制
2.删除默认的苹果工具栏和菜单栏
3.在web app应用下状态条(屏幕顶部条)的颜色 (iphone设备中的safari私有meta标签 ) 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明) 若值为“black-translucent”将会占据页面px位置,浮在页面上方
4.允许全屏模式浏览 (iphone设备中的safari私有meta标签 )
5.禁止了把数字转化为拨号链接 在iPhone上默认将电话号码变为超链接(蓝色字体)并且点击这个数字还会自动拨号
6.ios click点击事件延时300ms
7.移动端如何定义字体font-family
8.移动端字体单位font-size选择px还是rem (new)
9.移动端touch事件(区分webkit 和 winphone) (new)
更多问题
webApp与响应式区别响应式: 设计通过CSS3的MQ(Media queries),使网页在不同设备上都可以自动适应,从而具有更加优秀的表现效果。 而且响应式设计不仅用在移动网站,在PC端也有不同屏幕的适配,而且移动端和PC端可以只使用一套代码,这就是全平台的响应式设计 Webapp: HTML5移动端(移动网站、混合应用、WebAPP)为了解决屏幕适配经常会使用响应式设计(流式布局、CSS3媒体查询), 但是响应式设计并不是必须,也可以使用流式布局和remnant来解决移动端的屏幕适配问题meta标签
META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等
作用
META标签是HTML标记HEAD区的一个关键标签,它位于HTML文档的和之间(有些也不是在和 之间)。它提供的信息虽然用户不可见,但却是文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定
参考
手机端页面自适应解决方案—rem 布局进阶版
移动端Web页面适配方案
vh,vw单位你知道多少?
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104325.html
摘要:最初产生这个项目的想法应该是在年月份,当时正在学习中,就萌生了这样一个想法从一个用户这一年发布的微博数据中,提取最有意义的个关键词。这些东西提交完就可以提交审核了,微博应用审核的速度还算比较快的,一两天基本差不多会审核完。 最初产生这个项目的想法应该是在2018年10月份,当时正在学习python中,就萌生了这样一个想法:从一个用户这一年发布的微博数据中,提取最有意义的top50个关键...
摘要:不努力不奋斗,可能就会在基层一辈子止步不前。不过,只一句,如果你还在做这一行,还是一名程序猿媛,想走上坡路的你,也许我这到手的十几家一线互联网公司性能优化项目实战可能会对你有所帮助。 ...
阅读 2248·2023-04-26 00:01
阅读 780·2021-10-27 14:13
阅读 1787·2021-09-02 15:11
阅读 3348·2019-08-29 12:52
阅读 503·2019-08-26 12:00
阅读 2549·2019-08-26 10:57
阅读 3349·2019-08-26 10:32
阅读 2830·2019-08-23 18:29