wap页面怎么做?

这个问题困扰了我好久,在PC上我们惯用的px单位在手机上根本不适用,即使我们写了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>防止网页自动缩放也无济于事,因为各手机分辨率大小不同。

用百分比布局。宽度自适应做到了但是高度呢,高度也用百分比吗?难道把元素的高度写死吗。这种做法就是jquery mobile页面的做法了,大屏手机显示效果不好看。

Bootstrap做栅格化。这种做法有个很大的弊病,小屏隐藏多余的元素来展示页面,而实际上那些元素你都加载进来了,浪费资源。

前面两种做法也很难完美还原设计图的尺寸。那有什么好的办法呢?

灵活的em与灵活可控的rem

em是相对单位,相对于父级的字号。这里的父级其实指的是祖先级,一直往上哪里定义了字号就相对它,直到根节点html

假设它是相对于根节点的,根节点html的字号一般是16px,那么1em=16px12px=0.75em,假如在到根节点之前的节点已经有设置过字号了,比如说它设置了2em,那么1em=2em=32px0.75em=24px

这时候我们就发现坑爹了,假如我们是元素嵌套的,父级上设置了字号,这个单位换算的规则都变了!那怎么办?

rem也是相对单位,但是它是相对根节点的。这个就好办了,永远相对同一个字号,规则就一样了。假设根节点设置了font-size=16px 那么1em=16px12px=0.75em;假设根节点设置了font-size=32px 那么1em=32px0.75em=24px。不管在哪个地方单位换算的规则都是不会变的。

如何跟设计图对接

设计图上的单位是px,我们如何转换成em呢,难道用计算器吗?

这里有个单位换算小工具,它是换算em的,但是你也可以用它来换算rem,只要把基础像素设置成根节点字号就行了。但是基础像素应该设置成多少呢?

我看了小米的wap页面,他们做了一个媒体查询表,根据不同分辨率设置根目录的字号。这样就可以实现自适应了!它是直接写在页面上,模拟手机看源码吧view-source:http://m.mi.com/v2.html。下面是格式化后的部分代码:

@media only screen and (max-width: 300px) {
html {
font-size: 8.33333px
} .viewport {
max-width: 300px
}
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
html {
font-size: 8.33333px
} .viewport {
max-width: 310px
}
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
html {
font-size: 8.61111px
} .viewport {
max-width: 320px
}
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
html {
font-size: 8.88889px
} .viewport {
max-width: 350px
}
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
html {
font-size: 9.72222px
} .viewport {
max-width: 360px
}
}
……

棒棒哒有木有!这时候我们根据这个表来设置基础像素,比如设计图的宽度是640px,我们看它这个表,可以看到html对应的font-size值是17.77778px,那么基础像素就是这个值,然后我们根据设计图量出来的px长度转换成emrem单位了!

有没有更智能的方式?

为什么每次都要通过小工具去换算单位呢,有没有办法让单位自动换算的?

直接用css当然是行不通的,虽然它有calc()这个属性,但是兼容性不强。我们配合CSS预编译来做呢,lesssassstylus,不是可以让css有运算能力吗。

之后我发现了百度EFE团队开发的基于less的est框架里面就包含了这功能

推荐下自己的

第一次用了est,就发现了bug,@margin-rem()方法用不了,然后我打开它的less源文件想去修改一下的,发现它的实现方式一点都不优雅!主要因为less语言能力太弱了。改好之后又遇到几个其它方法的坑,遂打算自己写一个,反正也不难。

我最先尝试使用sass来写的。它是基于ruby环境的,这个我就不计较了,反正安装方式跟node一样简单,安装子。后来发现它竟然不支持正则,还能不能好好玩耍了?

最后就用了先进的stylus。它是基于node环境,适合我们前端的开发环境,不错。

然后我就模仿了est开发了自己的qst,自我感觉良好,已经在两个项目中实践了。

相关链接

手机响应式wap网页最佳方案的更多相关文章

  1. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  2. 手机响应式echarts

    // 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使用刚指定的配置项和数据 ...

  3. Zblog主题模板自适应手机响应式ZblogPHP简洁博客主题

    Z-blog PHP版本简洁主题模板 特点简洁舒适 手机移动端自适应,完美有利于优化 代码结构利于编辑 对于不懂代码的,也非常适合简答后台简答 PC端侧边栏下拉跟随,无论下面有多长,导航侧边栏都只在左 ...

  4. 手机响应式js轮播基础

    onmousedown --->ontuchstart onmousemove --->ontouchmove onmouseup --->ontouchend ontuchstar ...

  5. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  6. 60个响应式的Web设计教程–能够手机访问!

    想要学习响应式[responsive:屏幕自适应的效果]的网页设计和开发技术?在这个超大的收藏集合中,我想你定会找到想要开始学习的响应式网页设计教程. 面对超过1亿的手机互联网用户,开发专业和用户友好 ...

  7. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  8. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  9. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

随机推荐

  1. update操作多张表

    sql 语句多张表UPDATE用法一.当用一个表中的数据来更新另一个表中的数据,T-SQL提供多种写法(下面列出了二种),但建议用第一种写法,虽然传统,但结构清晰.飞.飞Asp技术乐园并且要注意,当用 ...

  2. FATAL: ActionView::Template::Error (application.css isn't precompiled):

    iwangzheng.com tty:[0] jobs:[0] cwd:[/opt/logs/m]13:02 [root@a02.cmsapi$ tail thin\ server\ \(0.0.0. ...

  3. php获取网页内容方法总结

    抓取到的内容在通过正则表达式做一下过滤就得到了你想要的内容,至于如何用正则表达式过滤,在这里就不做介绍了,有兴趣的,以下就是几种常用的用php抓取网页中的内容的方法. 1.file_get_conte ...

  4. SSM框架Web程序的流程(Spring SpringMVC Mybatis)

    SSM框架的Web程序主要用到了三个技术: Spring:用到了注解和自动装配,就是Spring的两个精髓IOC(反向控制)和 AOP(面向切面编程). SpringMVC:用到了MVC模型,将逻辑代 ...

  5. Ubuntu14.04server开放rootssh登录权限

    刚安装了Ubuntu 14.04 server的虚拟机,普通帐号可以远程登录,但是root不行,输入密码后一直报错: permission denied 最后发现ssh的配置(/etc/ssh/ssh ...

  6. location 、history

    location.href= location.reload() history.go()  0   1  -1 history.back() history.forward() history.le ...

  7. object-c 基本数据类型

    1.基本数据类型   int  float  double  char   布尔类型   枚举类型 2.对象类型和id类型  就是类类型或协议所声明的指针类型.  id类型可以表示任何类型,一般只表示 ...

  8. Android PullToRefreshListView上拉刷新和下拉刷新

    PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...

  9. 转载一篇关于ios静态库的文章

    http://blog.csdn.net/zsomsom/article/details/9163635

  10. 集群ssh服务和免密码登录的配置

    安装Hadoop之前,由于集群中大量主机进行分布式计算需要相互进行数据通信,服务器之间的连接需要通过ssh来进行,所以要安装ssh服务,默认情况下通过ssh登录服务器需要输入用户名和密码进行连接,如果 ...