关于rem,主要参考文档 1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有
分类:
移动开发 时间:
2016-02-02 16:25:19
阅读次数:
378
1. 页面需求这是要做的页面效果(不要对设计置评,这不是开发人员决定的):这是尺寸标注图(750*1334):然后美工在750*1334的设计稿之上,按我的要求提供以下素材的切图:包括两个下载按钮的背景图片,logo,底部梯形的渐变背景和body部分的mobile 背景图。注意这些图片都是在750*...
分类:
其他好文 时间:
2016-01-25 21:26:47
阅读次数:
236
一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践。碰到的问题还是很多的,主要是谈谈flex布局。flex布局是css3里的内容,一种新的布局方式,也称之为 弹性布局,主要是为了取代 inline-bolck 和float 为总布局...
分类:
移动开发 时间:
2016-01-17 20:16:34
阅读次数:
267
在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习。如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,...
分类:
Web程序 时间:
2016-01-13 23:44:49
阅读次数:
446
创建响应式网站1,创建可伸缩图像.photo{max-width:100%;}max-width:100%图像可伸缩,但是大小不会超过本来设定的大小;width:100%,图像也可伸缩,但是如果容器比图像大,图像就会被拉大会变丑。2,创建弹性布局.page{max-width:960px;} 布.....
分类:
Web程序 时间:
2015-12-26 19:41:59
阅读次数:
247
2个月前,写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实...
分类:
其他好文 时间:
2015-12-23 09:17:19
阅读次数:
228
话不多说,上代码,关键在对应的低版本安卓的微信浏览器,需要-webkit-box对应的-webkit-box-orient-webkit-box-pack等的设置。.flex{ /* 设置弹性布局 */ display:-webkit-box;/* android 2.1-3.0, io...
分类:
微信 时间:
2015-12-11 18:52:53
阅读次数:
484
2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。lex布局将成为未来布局的首选方案。一、Flex布局是什么?Flex是Flexible Box的缩写,意为"弹性布局",用来...
分类:
其他好文 时间:
2015-11-10 10:38:01
阅读次数:
197
当然也看到过遇到flexbox布局的属性将所有的新的老的前缀都加上的,这样省事啊 谁闲着没事整天研究那几个属性的兼容,更可况前端发展这么快说不定有更牛逼的样式出现但是想在移动端用好这个布局摸透这个属性 我还是一个个都探究下吧,在此先说下各浏览器PC端最新版本情况目前:IE最新版本是ie11, FF最...
分类:
其他好文 时间:
2015-10-05 19:27:02
阅读次数:
326
前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记,弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。让一个盒子具有...
分类:
其他好文 时间:
2015-10-02 16:10:12
阅读次数:
276