近期Responsive web design项目经验分享

关于meta  

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,
user-scalable=0, width=device-width, minimal-ui">

minimal-ui 默认浏览器的URL缩小

<meta content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0;" name="viewport" />

这个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

<meta content="yes" name="apple-mobile-web-app-capable"
/>

这个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

<meta content="black"
name="apple-mobile-web-app-status-bar-style" />

这个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

<meta content="telephone=no" name="format-detection" />

<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示
<meta name="apple-mobile-web-app-capable" content="yes"
/>
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

<meta name=”apple-mobile-web-app-status-bar-style” content=black”
/> 
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:
若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。
<meta
name="apple-mobile-web-app-capable" content="yes">
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent">

<link
rel="apple-touch-icon-precomposed"
href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明:
这个link就是设置web
app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)

<meta content="telephone=no" name="format-detection" />
<meta
content="email=no" name="format-detection"
/>//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码 

iOS用rel="apple-touch-icon",android
用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。
<link
rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png"
/>
<link rel="apple-touch-icon-precomposed"
href="/static/images/identity/HTML5_Badge_64.png" />

关于字体单位

使用rem 相对单位

关于宽度

使用百分比宽度布局

关于media

http://nmsdvid.com/snippets/ 这个网站里介绍的很全  有需要的要收藏
利器

关于图标

使用字体图标 我使用的是淘宝的字体图标  自定义图标需要上传符合格式的svg生成图标 存储相应项目

关于特殊CSS

9、手机浏览器多而乱,而且手机系统的默认处理方法也不同,兼容问题丝毫不比PC版的简单,所以要总结归纳常用的处理方法,

如-webkit-tap-highlight-color:rgba(0,0,0,0);/*禁止链接高亮*

/-webkit-touch-callout:none;/*禁止链接长按弹出选项菜单*/等等

http://ued.ctrip.com/blog/wp-content/webkitcss/  webkit
携程UED整理的资料 很全的

10、对手机平板的移动端来说,流量是很重要的,所以webapp中class和id的命名尽量断点,如头部可以命名为hd,中间为bd,底部为ft等(此建议待定,因为考虑到后期维护是否方便等问题);

关于动画animation

手机上不能在before,after等伪类上添加动画功能

关于border-radius

如果需要border描边  会在手机端出现BUG 没有圆角的效果
 改为box-shadow模拟描边特效

近期Responsive web design项目经验分享,布布扣,bubuko.com

时间: 06-13

近期Responsive web design项目经验分享的相关文章

自适应网页设计(Responsive Web Design)

转载自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.同样的内容,要在大小迥异的屏幕上,都呈

阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1像素以上(目前主流宽度是1366×768),有的还达到了2像素.同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad

Understanding Responsive Web Design: Cross-browser Compatibility

http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the last article, I described three ways to work with with images from a responsive design standpoint, discussing the best solution to adopt while serving pr

web架构设计经验分享(转)

本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领

Lync 项目经验-02-共存迁移-Lync 2013-TO-SFB 2015-规划02

本系列博文: Lync 项目经验-01-共存迁移-Lync 2013-TO-SFB 2015-规划01http://dynamic.blog.51cto.com/711418/1858520 Lync 项目经验-02-共存迁移-Lync 2013-TO-SFB 2015-规划02http://dynamic.blog.51cto.com/711418/1859143 项目规划: 1. 为了后续的高可用,后面所做的所有规划,都是参照这个原则来做. 2. 所有操作系统使用Windows Server

项目优化经验分享(八)TeamLeader经验总结

引言 通过前面的七篇博客,我把自己在项目优化过程的经验进行了分享,今天这篇博客,作为一个总结,就来讲讲作为一个TeamLeader,在项目管理中遇到的问题和解决经验! 正文 问题一:团队之间怎么沟通? 一个好的开发团队,首先要营造一个好的开发环境,团队之间要有良好的沟通互动,有时候在开发一期项目的时候需求还不是很明确,需要边做边确定,而这时就需要团队之间频繁积极的进行沟通,初步模型要积极进行评估讨论,不然就会出现辛苦几天而来的产品不符合需求,打回去重做.这不仅影响开发人员的心情,更重要的是影响开

【WEB API项目实战干货系列】- 导航篇(十足干货分享)

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 在今天移动互联网的时代,作为攻城师的我们,谁不想着只写一套API就可以让我们的Web, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的逻辑呢? [WEB API项目实战干货系列]

[原创]Spring JdbcTemplate 使用总结与经验分享

引言 近期开发的几个项目,均是基于Spring boot框架的web后端项目,使用JdbcTemplate执行数据库操作,实际开发过程中,掌握了一些有效的开发经验,踩过一些坑,在此做个记录及总结,与各位读者分享. 欢迎留言与我交流. 正确使用JdbcTemplate执行数据库操作 1.Bean声明 新增类型DatabaseConfiguration,添加注解@Configuration 该类型用于DataSource及JdbcTempate Bean的声明 基础代码如下 @Configurati

MySQL 性能优化的最佳20多条经验分享

今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的                    事,而这更是我们程序员需要去关注的事情. 当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语                句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这些优化技巧对你有用. 1. 为查询缓存优化你的查询 大多数的M