文档章节

App开发积累经验之CSS

半夏清风
 半夏清风
发布于 2016/06/16 14:10
字数 230
阅读 14
收藏 0
点赞 0
评论 0

        背景图片如果需要自动适应屏幕的大小,可以使用css3.0的background-                               size:cover;background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。如果我们不使用自适应行框架搭建网页,则每种图片需要三套,宽度以像素为单位分别为:640px,750px,1242px,如果以厘米为单位, 则需要11.29cm,22.57cm,33.86cm,效果比较好。

    图片的需要如果背景需要改动当使用PNG格式。css代码参考实例:

@media (min-width: 412px){
    .top_wrap{
        height: 3.80rem;
    }
    .agendum_wrap{
        height: 3.64rem;
    }
}

此代码可改图片的覆盖区域。

@media (-webkit-device-pixel-ratio: 1){
    .top_wrap{
        background: url(../../images/Live/top_bg.png) 0 0 no-repeat;
        background-size: 100% auto;
    }
    .agendum_menu{
        background: url(../../images/Live/agendum.png) center top no-repeat rgba(0,0,0,0.4);
        background-size: 100% auto;
    }
}

此代码为图片的转换。

© 著作权归作者所有

共有 人打赏支持
半夏清风
粉丝 2
博文 19
码字总数 3651
作品 0
西安
这边能招到 PHP 大神吗

招聘php及APP开发[杭州新加坡科技园] 杭州故乡人网络科技有限公司 岗位职责: 1、电子商务网站开发、系统开发; 2、按照项目管理流程,参与研发部门的总体设计评审; 3、进行详细设计、代码开...

magton ⋅ 2016/03/25 ⋅ 9

UI设计师/前端开发工程师 招聘

职位描述 1、负责PC端、负责Html5网站及移动端Web App开发; 2、Html5网站系统的性能稳定和优化升级; 3、为产品后期运营提供升级、维护等技术支持。 4.与后台开发工程师协作,完成各种数据交...

mahb520 ⋅ 2016/08/01 ⋅ 1

移动开发大调查:2%码农拿走54%的APP收入

开发者经济近日发布的《2014年移动开发经济报告》(请登录下载)调查了约一万名开发者,结果显示50%的iOS开发者和47%的Android开发者处于应用开发贫困线以下,每月收入不到500美元。这意味着...

oschina ⋅ 2014/07/22 ⋅ 18

AppCan认为,移动APP开发不是技术活

很多粉丝反应,AppCan的文章太专业了,技术大大们毫不费劲,小白看的晕乎乎。 时代变了,5年前,AppCan的受众只有开发者。现在,政府高管、集团董事长、非技术类管理者、中小企业主、各行各业...

梅朵 ⋅ 2016/06/13 ⋅ 1

Amaze UI 让 HTML5Web 应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未来趋...

妹子有爱 ⋅ 2015/08/10 ⋅ 2

Amaze UI让HTML5 Web应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”高调亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未...

妹子有爱 ⋅ 2015/08/10 ⋅ 0

[开源项目]skill_issues——开发经验,要的就是干货

[开源项目]skill_issues 项目地址:[http://git.oschina.net/duoduo369/skill_issue][1] 缘起 用osc@git或者github的时候会写各种各样的issue来记录解答一些技术上的问题,有的时候在一个项目...

duoduo3_69 ⋅ 2013/11/23 ⋅ 0

Bootstrap 2.0 发布,前端开发工具

Twitter今日在开发者博客上公布消息,6个月前发布的轻量级前端开发工具Bootstrap迎来重大改进,正式升级为Bootstrap 2.0(下载源码)。和原来一样,Bootstrap 2.0仍然是一个托管在GitHub上的...

红薯 ⋅ 2012/02/01 ⋅ 4

去怎么学习Hybrid app+混合开发 +ReactNative

  零基础的你在今年这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识, 懂一些CSS和JavaS...

H5混合APP开发 ⋅ 2016/08/29 ⋅ 0

兄弟们,时代变了

献给默默无闻,奋斗在第一线的苦逼程序员们! 起因 无意间翻看了之前在Evernote的关于服务器端记录的开发笔记,感触良多。 2009-2010的上面记录的大多都是关于Nginx、Apache、MySQL、Linux、...

程序员孟帅 ⋅ 2016/02/16 ⋅ 103

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 26分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 27分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 29分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 31分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 34分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 34分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 35分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 42分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 47分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 48分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部