- 浏览: 659656 次
文章分类
最新评论
-
richondow:
Android实战开发租赁管理软件百度网盘下载:链接:http ...
Android实战开发租赁管理软件(适配UI,数据的存储,多线程下载)课程分享 -
古老的传言:
大哥,课程还有吗?有的话可否发一份给我?我的邮箱7606089 ...
马哥Linux系列七:实战大数据技术专题(Hadoop、NoSQL、Zookeeper、MapReduce)课程分享 -
kgtw:
1223137028@qq.com求发一份
基于Lucene4.6+Solr4.6+Heritrix1.14+S2SH实战开发从无到有垂直搜索引擎
谷歌Web中文开发手册:3响应式
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive
(译者注:全部按照教程的代码,并不能实现代码,我调试之后发了全部代码出来。ps:没有使用,谷歌给的例子访问不到。)
每个设备都有自己独特的优势和限制,要让这个网页在众多的不同的显示设备中被接受,作为一名Web开发者,你要尽力让这个页面支持所有设备。
目录:
- 添加viewport
- 应用简单样式
- 设置第一个断点
- 限制最大宽度的设计
- 改变间距和文字大小
- 让元素自适应
- 小结
前一篇教程已经把页面的基本内容填充好了,这一篇我们会将装饰它,并且让它做一系列不同分辨率的设备中都能够漂亮地显示。
依照移动优先的开发原则,我们从窄屏入手——类似手机——并且先建立起这方面的概念,然后再逐渐向大屏幕扩展。我们可以通过判断视窗宽度来实现不同的设计和布局。
早先我们创建了一对不同级别的设计定义内容如何来显示,现在我们需要页面适应不同的布局。我们需要设置一下断点——用与决定何时改变布局和风格——基于内容如何来适应不同的屏幕分辨率。
添加viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
应用简单样式
风格引导
风格引导能够有效地让访客对页面有一个高层次的认识并且确保你在设计上是统一的。
Colors
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38
添加装饰图片
在前面的教程中,我们添加了“内容图片”,这些对于描述我们产品很重要。“装饰图片”不是内容所必须要的,但添加之后可以使访客更加关注我们的产品。
举个例子。带图片的标题可以引诱访客去阅读更多关于产品的内容。
可以很简单地应用,我们这里直接使用背景图片。应用一个简单的CSS方式。
#headline { padding: 0.8em; color: white; font-family: Roboto, sans-serif; background-image: url(backgroundimage.jpg); background-size: cover; }
选择一个简单的“模糊”(虚化)的背景图片可以让文字阅读变得简单。设置background-size:cover;可以保证图片正常的纵横比。
设置第一个断点
现在的设计,在视图宽度达到600px之后就变得有点难看了。我们的想法是,每行的文字长度不要超过10个(最佳阅读长度)。这就是我们接下来想改变的。
【目前的情况是,每行文字的长度会随着视图宽度增加而增加】
600px是一个比较好的断点,我们用“媒体查询”的技术来实现。
@media (min-width: 600px) { }
这样有更大的空间去让页面适应更大的视图窗口。
提示:你不用重新设置所有元素,只要对应做一些调整即可。
我们需要做的:
约束设计的最大宽度;
改变元素的padding属性并且修改字体大小;
让注册表单浮动在标题简介里;
让视频浮动于主体内容;
降低图片大小并且以表格形式展示。
约束设计的最大宽度
只有两个主要布局:一个窄视图和一个宽视图,这样可以简化我们的构建过程。
现在我们不想考虑更大宽度的视图会再有不同的布局,让宽度超过800px时,内容样式将不再变化。那可以添加多一个div,放在某模块里面,应用一个margin:auto;让它居中显示。
<div id="section1"> <div class="container"> <h2>What will I learn?</h2> .container { margin: auto; max-width: 800px; }
改变元素的padding属性并且修改字体大小
在窄视图中,我们没有足够的空间去显示内容,所以只能降低元素大小。
在较大的视图中,我们就得考虑到访客离屏幕较远的情形,所以需要把元素增大,并且加大元素间的距离。
在我们的产品页中,我们让元素和边界保持5%宽度的距离并且增大元素大小,来解决这个问题。
#headline { padding: 20px 5%; }
让元素适应宽视图
浮动“表单”
#headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px; } #headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300; }
#headline { padding: 20px 5%; }
浮动“视频”
在窄视图中,“视频”宽度是100%,并且排布在“关键点”之后。在宽视图中,这样做会让视频显得太大,失真。
所以“视频”需要在窄视图的垂直流排布中脱离出来,并排与“详情”显示。
#section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em; } #section1 video { width: 50%; float: right; }
铺排图片
#section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; }
让图片响应
使用图片时,要考虑到当前的视图的像素大小。<img src="photo.png" srcset="photo@2x.png 2x">
表格
@media screen and (max-width: 600px) { table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } }
小结
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> CS256: Mobile Web development - structure </title> <style> #headline { padding: 0.8em; background-image: url(img/back.jpg); background-size: cover; } #section2 div img { width: 80%; margin: 1%; } @media (min-width: 600px) { #headline { overflow:hidden; padding: 20px 5%; } #headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px; } #headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300; } .container { margin: auto; max-width: 800px; } #section1{ overflow:hidden; } #section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em; } #section1 video { width: 50%; float: right; } #section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; } } @media screen and (max-width: 600px) { #section3{ overflow: hidden; } table{ width: 100%; } table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } } </style> </head> <body> <div id="headline"> <h1> 移动页面开发 </h1> <h2> 开发移动页面的经验 </h2> <div id="blurb"> <p> 你已经听说过移动端适应是个大问题,而且你也不知道怎样将传统的桌面网站转换成为一个快速的、有效的多屏幕适应的Web App </p> <p> 做这个教程就是用来教Web开发者关于如何积累这些技术和经验的。 </p> <p> 这个教程会首先注重“移动优先”的Web App,要保证先在以下设备中正常表现: </p> <ul> <li> Android, <li> iOS, <li> and others. </ul> </div> <form method="post" id="register"> <h2> Register for the launch </h2> <div> <label for="name"> 名字 </label> <input type="text" name="name" id="name" placeholder="张三" required> </div> <div> <label for="email"> 邮箱 </label> <input type="email" name="email" id="email" placeholder="neo@example.com" required> </div> <div> <label for="tel"> 电话 </label> <input type="tel" name="tel" id="tel" placeholder="18888888888" required> </div> <input type="submit" value="注册"> </form> </div> <div id="section1"> <div class="container"> <h2> 我可以学到什么? </h2> <p> 完成课程之后,你可以开发一个高水平的Web App </p> <p> 你可以学到以下几点 </p> <ul> <li> 开发一个完美的能在移动设备流量的网站 </li> <li> 使用各种工具去测试这个网站的表现 </li> <li> 将这种技术应用到你未来的项目 </li> </ul> <video controls poster="img/product.jpg"> <source src="video/product.mp4" type="video/mp4"> </source> <source src="video/product.webm" type="video/webm"> </source> <p> 抱歉!您的浏览器无法播放该视频。 <a href="udacity.mov"> 请点击这里下载。 </a> . </p> </video> <br> </div> </div> <div id="section2"> <h2> 指导老师 </h2> <p> 移动行业领先者 </p> <div id="images"> <img src="img/p1.jpg" alt="Mp1" srcset="photo@2x.png 2x"> <img src="img/p2.jpg" alt="Mp2" srcset="photo@2x.png 2x"> <img src="img/p3.jpg" alt="Mp3" srcset="photo@2x.png 2x"> </div> <br> </div> <div id="section3"> <h2> 我为什么要担心移动设备的反应? </h2> <p> 它们太普及了! </p> <table> <caption> <p> 数据来自 <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403"> StatsCounter </a> </p> </caption> <thead> <tr> <th> 国家 </th> <th> 桌面分享 </th> <th> 平板分享 </th> <th> 手机分享 </th> </tr> </thead> <colgroup> <col span="1"> <col span="1"> <col span="1"> <col span="1"> </colgroup> <tbody> <tr> <td data-th="Country"> <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403"> 印度 </a> </td> <td data-th="Desktop share"> 32% </td> <td data-th="Tablet share"> 1% </td> <td data-th="Mobile share"> 67% </td> </tr> <tr> <td data-th="Country"> <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403"> 大不列颠 </a> </td> <td data-th="Desktop share"> 69% </td> <td data-th="Tablet share"> 13% </td> <td data-th="Mobile share"> 18% </td> </tr> <tr> <td data-th="Country"> <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403"> 美国 </a> </td> <td data-th="Desktop share"> 69% </td> <td data-th="Tablet share"> 9% </td> <td data-th="Mobile share"> 22% </td> </tr> <tr> <td data-th="Country"> <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403"> 中国 </a> </td> <td data-th="Desktop share"> 86% </td> <td data-th="Tablet share"> 4% </td> <td data-th="Mobile share"> 10% </td> </tr> </tbody> </table> <br> </div> <div id="footer"> <div class="container"> <p> 还是需要脚部信息的~ </p> </div> </div> </body> </html>
相关推荐
《Android 4.X 应用与开发实战手册:适用Android 4.X-2.X(第2版)》还介绍了如何将应用程序上传到Google Play(原Android Market)供全球Android移动设备用户下载,以及如何将Ad Mob广告板置入应用程序,即使应用...
网页开发DIV+CSS谷歌响应式插件,网页开发DIV+CSS谷歌响应式插件,在响应式的网页开发时,非常需要的几款本地测试插件。
google公司开发手册,包含google内部对于项目开发的具体要求。
GWT(Google Web Toolkit) 是 Google 最近推出的一个开发 Ajax 应用的框架,它支持用 Java 开发和调试 Ajax 应用,本文主要介绍如何利用 GWT 进行 Ajax 的开发。 Ajax技术是当前开发web应用的非常热门的技术,也是...
通过这本精巧的食谱,深入了解GWT编程世界,其中介绍了GWT Toolkit的常用配方! 它涵盖了广泛的主题,从示例应用程序和面试问题到回调功能和各种小部件。
web渗透: Google Hacking web渗透: web服务器指纹识别 web渗透: 枚举web服务器应用 web渗透: 识别web应用框架 web渗透: 配置管理测试 web渗透: 身份管理测试 web渗透: 不安全的HTTP方法 web渗透: 登录认证安全测试 ...
Android_中文手册_CHM_Android_开发手册_安卓开发手册。安卓(Android)是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。Android...
谷歌的跨平台 UI 框架,具有响应式编程、热重载、美观的 Material Design 设计等特点,支持 iOS、Android、Web、桌面应用等多个平台。
本书从易到难、由浅入深、循序渐... 本书内容紧凑、实例丰富、结构严谨、深入浅出,适合广大Web网站开发人员、Google地图爱好者、专业GIS开发人员和大中专院校学生阅读,尤其适合有一定JavaScript编程基础的相关人员。
Web 控件 V3.2 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户 集成,支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发,不适用于 C/S 开发...
高仿谷歌(Google)搜索引擎简洁响应式首页,自适应手机、平板、电脑等设备。
web的喀什旅游网站设计与开发-web的喀什旅游网站设计与开发系统-web的喀什旅游网站设计与开发系统源码-web的喀什旅游网站设计与开发管理系统-web的喀什旅游网站设计与开发管理系统java代码-web的喀什旅游网站设计与...
GWT学习资料
《web之困:现代web应用安全指南》在web安全领域有“圣经”的美誉,在世界范围内被安全工作者和web从业人员广为称道,由来自google chrome浏览器团队的世界顶级黑客、国际一流安全专家撰写,是目前唯一深度探索现代...
创建该项目是为了完成Freecodecamp.org上的响应式Web设计认证。 我必须完成17个用户案例的要求。 可以在以下找到项目提示: 在此项目中,我做了四点观察: I.整个“ Google是开发人员的最好朋友”的叙述=完全正确。 ...
GoogleTV开发手册,Building.Web.Apps.for.Google.TV
web的喀什旅游网站设计与开发-web的喀什旅游网站设计与开发系统-web的喀什旅游网站设计与开发系统源码-web的喀什旅游网站设计与开发管理系统-web的喀什旅游网站设计与开发管理系统java代码-web的喀什旅游网站设计与...
本书从易到难、由浅入深、循序渐... 本书内容紧凑、实例丰富、结构严谨、深入浅出,适合广大Web网站开发人员、Google地图爱好者、专业GIS开发人员和大中专院校学生阅读,尤其适合有一定JavaScript编程基础的相关人员。
spring3中文开发手册,来源于google翻译。
解析Google Android SDK 作者: 薛显亮 副标题: 智能手机开发范例手册 出版年: 2012-7 页数: 494 ISBN: 9787113143596