谈谈移动端适配问题
写过一些移动端的页面,但是总感觉写的不是很顺畅。css方面需要提升,用上了flexible.js进行重构,下面我谈谈遇到的问题,理解和总结:
先开个头,我认为移动端适配有几个关键词:动态屏幕宽度device-width,dpr-pt-px,meta标签——据说viewport是个比较复杂的概念,所以你也可以不用管,实践出真知。其实他不是个空词,只是讲多了弄易迷糊,也记不住,弄不懂(反正我不太懂)。把他们抓住了,我觉得应该说至少心里有底了。样式出问题的话容易有解决思路。
首先用的最多的是形成理想视口的meta标签是这样的:
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
虽然说固定高度,宽度自适应(垂直方向用定值,水平方向用百分比,定值,flex都行)的layout用的最多,但是这个meta并不是必须的,比如固定宽度,viewport缩放的layout采用这样的meta:
<meta name="viewport" contentn="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
这个0.5是根据屏幕宽度和meta里的width值动态确定的,好了,现在来谈谈今天的主题-第三种layout。
rem做宽度,viewpoort缩放–淘宝h5适配方案。lib-flexible主要是动态修改了meta标签,然后动态地html标签添加data-dpr属性(讲到这一点,w3c允许开发者可以给任何元素增加自定义属性,js用好自定义属性的话挺棒的)并且动态改变它的值,还有动态设置html tag的fz大小。
先引用flexible:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>再来一波</title>
</head>
<body>
<!-- 页面结构写在这里 -->
</body>
</html>
淘宝有人开发了px转rem的sublime插件cssrem,可是我觉得对于我来讲应该会降低效率,所以不太推荐,还有基于mixin的sass或者stylus提高开发效率的一些技巧,易sass为例:
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
有了这样的混合宏之后,在开发中可以直接这样使用--推荐这样用mixin:
@include font-dpr(16px);
除去以上,lib.flexible还有makegrid栅格系统
尽管iphone dpr存在交大差异,但依然可以通过使用flexible达到在大屏手机上看到一行更多文本的效果:
rem 并不适合用到段落文本上,所以在Flexible整个适配方案中,考虑文本还是使用 px 作为单位。只不过使用 [data-dpr] 属性来区分不同 dpr 下的文本字号大小。
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
好了,下次给大家分享更多的实战经验。