作者:different(D姐),前端工程师 博客: 新浪微博:inline_block

Slides:



Advertisements
Similar presentations
三 图 形 设 计 的 方 法 与 表 现. 本章节学习目的 : ( 1 )熟练把握图形设计的方法程序,注 重理论与实践性相结合; ( 2 )掌握图形的基本表现形式和语言元 素的运用能力; 重难点: 充分运用图形思维能力,并将图形设 计基础方法和表现应用在设计实践中,注 重在表达上具有趣味性和准确性。
Advertisements

LOGO 理 气 药理 气 药. 本章学习要求  ( 一 ) 概述部分 掌握行气药的功效、主治、性能特点、配伍应用及使 用注意。 了解行气药及有关功效术语的含义。 ( 二 ) 药物部分 掌握橘皮、枳实、木香、香附、川楝子的性能、功效、 应用、特殊用法及特殊使用注意。 熟悉青皮、乌药、沉香、薤白的功效、主治及特殊用.
LOGO 郑州市第二十六中学 张松晨 承斑斓梦想 铸精神乐园 -- 教师发展学校试点工作阶段性成果.
简历填写攻略. 简历投放  不要被招聘要求吓倒  不要海投,乱投  看清招聘要求再投,不要投能力相差过多的岗位,根 据招聘要求去填写简历:如需注明薪金要求  主要投放渠道:招聘会,人才网  尽量不要投同一公司的多个岗位  三大人才网站:前程无忧,中华英才网,智联招聘.
高雄市議會第 2 屆第 2 次定期大會 高雄市政府秘書處業務報告 報告人:處長陳瓊華 104 年 10 月 29 日.
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
LOGO 江苏省徐州财经高等职业技术学校:张峰 —— 心理问题揭秘. LOGO 说课内容 一、说教材 二、说学情 三、说教法与学法 四、说教学过程设计 五、说板书设计.
LOGO 中国旅游地理 学习情境三. 学习目标 了解中国旅游区划的各种不同方案 掌握中国旅游交通运输网络的组成 熟悉主要旅游区域的旅游交通运输 网点。
月經異常的原因及警訊 組員: 陳少康、張康樂、許晉愷、何曄、方泠瑩、張 顓麟、蘇梓喬、溫鵬皓、林雅雯.
化学制药工艺学 沈阳药科大学 知识模块 1 绪论. 沈阳药科大学制药工程学院 LOGO 知识点 1 化学制药工艺学及其研究内容 知识点 2 世界制药工业的发展现状 知识点 3 我国医药工业的现状和发展前景 知识模块 1 绪论 国家级精品课程 沈阳药科大学制药工程学院.
說明事項  大陸交換學習近況  大陸姐妹校介紹  申請資格和程序  研究生補助 大陸交換學習近況 2009 年秋首次進行,計有 6 校共 20 位學生來校交換學習。 來校交換生.
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
有教無類 因材施教 適性揚才 多元進路 優質銜接
Web app和html5给前端带来的变化 —— 我们的html5游戏平台之旅.
教育部顧問室海洋教育先導型計畫 補助計畫課程 課程名稱:跟著鄭和下西洋
“321人才计划”情况介绍 南京高新技术产业开发区 人才工作办公室.
消失的吸管 隊名:吸管應該消失才隊.
助學工作說明會 及 教育訓練.
科学评价观下的幼儿全面发展评价 湖北省武汉市青山区教科研中心 胡秀玲.
南宁市中考网上报名录取系统 使用手册 2014年5月.
師資生修讀教育學程 重點提醒 師資培育暨就業輔導中心.
    第三章:中国的自然资源    第二节  中国的土地资源.
论设备监理 在构建能源互联网中的重要作用 LOGO 华铁工程咨询有限责任公司 郑 旭 日 –--总监理工程师
LOGO 毕业实习要求 数学计算机科学系 潘杨友.
案例:社區參與式活動規劃 前言:規劃活動要經常想到社造精神 因為‧ ‧‧ ‧ 所以‧ ‧‧ ‧ 83年從日本引進推動「社區總體營造」工程
黄石市富宏机械制造有限公司 融资计划书.
邮币卡开户、银行签约、出入金流程.
加入圖片.
南台科技大學 報告人 萬金生 教授 中華民國一0二年七月二日
第十六章 股票交易資訊分析與試算 課前指引 目前最熱門的理財方式莫過於投資股票市場,因此本章首先講解如何從美國股市匯入重要資料,之後教授使用WEB查訊功能,匯入台灣股市即時或盤後交易資訊到Excel工作表中,再利用資料分析工具來協助瞭解個股。最後再利用Excel圖表功能來繪製成股票K線圖,這是不是很有趣及實用呢?
实验一:分析“征途游戏”网站的类型与推广手段
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
正确的移动适配 飞鹰正义 百度站长平台 飞鹰正义微信 百度站长社区超级版主
簡報內容 網路請購系統說明 經費授權注意事項 請購單&授權應用範例 系統環境及設定. 簡報內容 網路請購系統說明 經費授權注意事項 請購單&授權應用範例 系統環境及設定.
六. 布局.
美学概论 主讲教师 孙建章 沈阳电大文法系.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
前言 网站内容呈献是网站开发的一项重点,它最直接影响到一个网站的受欢迎程度。最起码的要求,是用户必须能有效地使用网站和浏览网站的内容。
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
郑州市惠济区第六中学 网站推介 姜茂方 2015年1月10日.
文書檔案與實務概述 103年7月30日 主講人:總務處文書組單秀琴組長.
北京市医师定期考核信息管理系统 在线考试培训会 北京市卫生和计划生育委员会 北京市医师定期考核办公室 2016年9月
世界地球日 北京市京源学校 侯小波.
模块七 信息获取与发布 第8章 计算机网络信息的获取与发布.
项目管理风险流程图 巴中市交通运输局.
数据访问页.
LOGO 公 民 与 法 法务审计部 2014年8月22日.
拿 法 常晓波博士 Mobile:
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
吉林省信息技术与教学融合优质课大赛 参赛教师提交大赛作品流程 吉林省电化教育馆.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
我參與,所以我分享更多 豐原高中 潘淑滿.
/ 第7讲:移动开发 冯顺磊 /
机械制图:绘制正五角星 徐霄宇.
廣告學程面試題目.
9.
百週年專刊.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
第7章 使用CSS设置链接与导航菜单 经济管理学院.
杭州国家粮食交易中心 欢迎您!.
大葉服務學習執行說明 課外活動暨服務學習中心:黃泰元.
2011年版大學學系探索量表測驗結果說明 輔導室 楊欣翰老師.
目 录: 一、网络存储系统的登录 二、网络存储系统的基本使用 三、学生提交作业功能的使用 四、教师开放资源功能的使用.
103學年度第1學期新北市 政府辦理弱勢幼兒教育津貼 作業說明會 承辦人員:塗彥凱(分機2800)
一切都是課程 『國際教育』在明道.
工业设计教研室 主讲教师:李明 Mobile: 教学主楼1385室
道家的中心觀念.
學生學習診斷與進展評量 測驗科目:第一次國語文、第二次數學 (數學要帶紙筆計算)
项目商业计划书内容模板 — 说明 该模板仅为商业计划书内容模板,仅列举材料所应包含内容:封面、理论基础、技术来源、技术门槛、团队简介、创新突破、应用前景等。 模板中LOGO、标题、文本框及字号格式等并非大赛要求样式。大赛并未对商业计划书的背景、格式、各部分篇幅和顺序等方面提出具体要求,请各参赛队伍根据实际情况自行设计编写,整体篇幅不超过15页。尽量采用图文并茂的方式进行展现。
Presentation transcript:

作者:different(D姐),前端工程师 博客:http://www.w3cplus.com 新浪微博:inline_block Responsive之小试牛刀 作者:different(D姐),前端工程师 博客:http://www.w3cplus.com 新浪微博:inline_block

提纲 Viewport浅谈 Fluid img处理 响应式布局 响应式布局面临的几个问题

1、viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.什么是viewport 2.他的由来,有什么作用 3.桌面浏览器的viewport跟移动viewport的区别 4.扩展知识

1.4 扩展知识 1.css像素与设备物理像素的区别 http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html 2.viewport相关内容链接,详见 http://www.w3cplus.com/css/advanced-html-css-lesson4-responsive-web-design.html#viewport http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.mozilla.org/enUS/docs/Mobile/Viewport_meta_tag

2、Fluid img处理 1.通常处理img{max-width:100%;} 2.需要注意的地方 3.IE6兼容 参考:http://alistapart.com/article/fluid-images http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries-pt2.html

2.3、IE6兼容 AlphaImageLoader使得ie6透明的微软css过滤 .logo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader» (src="/path/to/logo.png", sizingMethod="scale"); }

3、响应式布局 1.设计布局 2.结构布局——grid

3.1、响应式设计布局 参考: http://www.lukew.com/ff/entry.asp?1514 http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/ http://www.w3cplus.com/source/responsive-resources-design-layout.html

3.2、响应式结构布局 1.Grid 2.Media Queries 参考:http://www.columnal.com/demo/ http://responsive.gs/ http://www.responsivegridsystem.com/ http://www.w3cplus.com/resource/tags/259.html http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries http://www.w3cplus.com/content/css3-media-queries

4、响应式布局面临的几个问题 1.Fluid img 2.Fluid 其他媒体元素 3.导航处理

4.2、Fluid 其他媒体元素 1.流式媒体 2. iframe和嵌入媒体

4.3、导航处理 参考:http://www.w3cplus.com/source/20-useful-responsive-menu-navigation-tutorials.html http://www.w3cplus.com/css3/responsive-mobile-navigation-menumethod s-and-solutions.html

5、Q&A 谢谢 作者:different (D姐) 博客:http://www.w3cplus.com 新浪微博:inline_block