建网页网站,跨网浏览器,免费直播sdk,无锡招标网官方网站一、什么是webapp
1、长的像app#xff0c;交互也像app的H5页面。 webapp不是App#xff0c;不需要安装#xff0c;手机网页直接打开。
二、移动端web的布局方案
1、例如#xff1a;rem布局、vw/vh布局、flexible布局。 推荐使用rem布局#xff0c;解决不同手机之间的样…一、什么是webapp
1、长的像app交互也像app的H5页面。 webapp不是App不需要安装手机网页直接打开。
二、移动端web的布局方案
1、例如rem布局、vw/vh布局、flexible布局。 推荐使用rem布局解决不同手机之间的样式兼容性问题。
2、原因 手机像素密度不一样屏幕宽度、屏幕分辨率不一样。 在移动端写样式一般不用px做单位px是绝对单位要用相对单位去做。
3、rem.js
// 作用重置html的font-size大小
// 让html根字体的大小等于当前屏幕px像素的10分之1function resetRootFZ() {// 1.通过dom操作找到htmlvar oHtml document.querySelector(html)// 2.获取这个html的宽度var w oHtml.getBoundingClientRect().width // px当前屏幕的总宽度// 3.设置根字体的大小等于html节点的宽度的十分之一oHtml.style.fontSize w/10 px
}// 调用这个方法
resetRootFZ()// 当window窗口尺寸变化时重新设置根字体的大小
window.addEventListener(resize, function(){// 屏幕发生resize事件重新设置根字体resetRootFZ
})
4、在index.html的head引入
script src./rem.js/script
5、比较 1类型一
2类型二
6、css的单位 1rem: root font size .box { width: 2rem; } 宽度是html根字体的两倍。
2em: 相对于最近一个父元素的fontSize
3px: 绝对单位
4vw vh
三、UI稿量尺寸
1、量稿子的单位是px
2、移动端的UI搞一个轮播图宽度是750px高度是352px
3、352px怎么转换成rem 750px对应10rem352px则是352*10/750 352/75
4、vscode里以后计算用插件“px to rem”
