移动端开发
前期准备
使用方案为淘宝无限适配方案。
在进行移动端开发时,首先需要进行一些配置。
在html文件中进行如下配置:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
再引入js文件,js文件内容如下:
!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
或者
let html = document.documentElement;
if(!this.isMobileSize) { //判断不是移动端设备
html.style.fontSize = '12px';
return;
}
let hWidth = window.screen.width;
html.style.fontSize = hWidth/10 + 'px';
判断是否是移动端设备,请移步如何判断设备是移动端
它的作用主要就是在页面的html标签上添加一个font-size。
例如,当浏览器调试尺寸宽度为375时,font-size=37.5px;
配置完毕之后,就可以进行移动端开发了。
使用技术
@media媒体查询
媒体查询常用的就是讲@media直接写在<style>标签里:
@media screen and (max-width: 1024px) {
.myclass {
background-color: red;
}
} //表示在可视区域宽度<=1024时,显示这里的样式
@media screen and (min-width: 1025px) {
} //浏览器可视区域宽度>=1025时,显示样式
@media screen and (min-width:321px) and (max-width:375px) {} //321<=可视区域宽度<=375时
常见的移动端设备就是手机,平板,设备宽度最大就是1024,所以可以以1024为界限,来区分PC端和移动端。
注意:
min-width和max-width判断的都是浏览器的实际宽度,可以发现一个问题。在PC端显示的应该是PC端媒体查询的样式,但是,当浏览器窗口没有最大化的时候,窗口宽度小到了一定程度(如700),此时你就会发现,PC端的样式变成了移动端的样式。
解决办法:
使用max-device-width
和max-device-width
属性,判断你的设备屏幕实际的宽度
,这样就不会存在上面的问题了,更好的适配PC端和移动端。
@media screen and (max-device-width: 1024px) {} //移动端屏幕
flex布局
rem适配
rem 是一个相对单位,相对于根元素的字号大小进行计算。
例如,750宽度的屏幕下,根元素字号大小为75。
现在要做一个页面,页面有一个盒子,在750宽度的屏幕下,盒子宽度占600px,那么就可以设置盒子宽度为600/75 = 8rem。
@media screen and (max-device-width: 1024px) {
.box {
width: 8rem;
}
}
这样设置的盒子宽度是可以响应式的,当屏幕变大时,宽度也变大。
vw适配
vw即Viewport’s width,是css3规范中的视口单位,它是相对单位,相对于视口大小。
视口宽度 = 100vw ----> 1vw = 视口宽度1%
相对于视口的宽度,视口被均分为100单位的vw。
750px = 100vw ,那么7.5px = 1vw。
除此之外还有vh单位 即Viewport’s height,相对于视口的高度,视口高度被均分为100单位的vh。