|
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
01 流式布局 流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果，但是目前行业里用流式布局切web app的公司还是挺多的，如：亚马逊，携程，兰亭 还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。 03 响应式做法 响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。 通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
/*你的css代码*/
}优点
在写页面时，直接使用px, 将页面写死。再通过设置 viewport 来对页面进行缩放的方法，使用适配。这个方法简单粗暴，又高效。不过，使用过程中有反应缩放会导致有些页面元素会糊的情况. <meta name=[color=#dd1144]"viewport"[/color] content=[color=#dd1144]"width=320,maximum-scale=1.3"[/color]> 具体操作方法，可参与上一篇文章：viewport缩放方法，解决移动端自适配 05 rem + viewport 缩放 这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。这个方案，很好的解决了，使用viewport 缩放会糊的情况 viewport 是固定的, 使用rem 来适配（需要进行px与rem的转换） <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。 举个例子： html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}然后去针对那些设备去做media query设置也可以实现适配，例如下面这样： html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}07 vw和vh 页面中所有的关于大小的设置，都需要以屏幕的大小为准，进行计算，相对复杂 [/p][p]vw和vh是相对于视口的宽度/高度，即： 100vw = 视口的宽度 100vh = 视口的高度[/p][p] 总结：关于移动端的适配方法，就总结到这里，欢迎大家指点补充 |
|
|
公众号
