Responsive web design 学习笔记
Advanced Styling with Responsive Design
此笔记为Coursera同名课程笔记。
Week1
什么是响应式设计?
响应式设计:
- It is designing your sites with multiple screen sizes/resolutions in mind.
- Sites should "work" under any platform, any browser size, any orientation.The user should have the power.
需要考虑的概念 Concepts to consider
- Media queries - decting the viewport size 检测
- Flexible grid-based layout for the relative sizeing
- Flexible images
这里是一个响应式设计网站的范例。
测试网站是否响应式的方法:
- 调整浏览器大小。
- 使用ami.responsivedesign.is帮助判断。
- 使用 Chrome/Firefox Dev Tools。
让网页适应页面大小的三种选项
- Responsive Web Design(RWD) - fluid measurements, flexible grids, and varying CSS rules.同一套代码,通过检测
meta name=viewport
实现。能优化搜索引擎分数。 - Adaptive Design - returns one of multiple versions of a page based on the type of device.根据不同设备返回不同代码。
- Seperate Mobile Site - a seperate page URL for the mobile site.
Why RWD? 响应式页面设计的优点?
- Easier to share your data with a single URL. 容易分享。
- Easier to search engine to index the page. 搜索引擎优化。
- Fewer files = less maintenance. 容易维护。
延伸阅读:Fluid Measurements 动态单位(em、rem、px...)
- Responsive Web Design: Using Fonts Responsibly by Annarita Tranfici
- Web Design Basics: Rem vs. Em vs. PX - Sizing Elements in CSS by Matthew Davis
- What's the Deal with Em and Rem?
- Font Size Idea: px at the Root, rem for Components, em for Text Elements by Chris Coyier
- 综合指南: 何时使用 Em 与 Rem
Fluid Measurements
- Your content should fit the size contraints of the viewport. 要有普适性,不能只适应特定的大小。
- Horizontal scrolling is bad. 避免水平滚动。
Absolute measurements
- px
- 1px 代表显示屏上的一个像素
- mm, cm, in
- 用于打印
- pt
- 1 point = 1/72 of an inch.
- pc
- 1 pica = 12 points.
Relative measurements
- %
- percentage values that are always relative to another value.
- em
- font size of the element.
- rem
- font size of the root element.
- vw
- 1% of viewport width.
- vh
- 1% of viewport height.
1em = 12pt = 16px = 100%
1in = 2.54cm = 25.4mm = 72pt = 12pc
Week 2
Media Queries
- Media queries allow the style to depend upon the meida properties.
- CSS 2.1 used media types.(Just "screen" and "print" option).
CSS3
- CSS 3 increased the capabilities. Style can depend on many features.
- width, height, orientation, resolution, ...
- Boolean operators can also be applied to increase power.(and/or)
The two query components
A media type(screen, print, all, ...)
The actual query of a media feature and "trigger" size(width, height, orientation, resolution, ...)
example:
screen and (max-device-width: 480px) and (resolution: 163dpi)
How to implement media queries
- Use the @import rule
@import url(smallstyle.css) screen and (min-width:600px) - Put media query directly in the style sheet(Mostly used)
@media screen and (min-width:500px) {...} - Include query in the link (not good)
Wireframes
- Coding after your design.
- Wireframe 可以看作布局的草稿,只关注内容和布局
- Mobile view is the most important view in web design. 移动视图最重要!
- 总的来说就是要提前想好你的页面要怎么根据浏览器大小变化,先设计再动手!
- 一些 Wireframe 的规则
breakpoints
- Size that define a change in your site layout or content.
- Used to provide best possible experience for users based on device infomation.
MOBILE FIRST !!
- You shouldn't see breakpoints for small screens. The default styling already convers that.
- You should have min-width instead of max-width
- 默认设计时,要按照移动视图来进行设计,其次再考虑更大窗口下的展现方式。
Media Queries - Part 2
Step 1: Grab infomation
The meta viewport tag tells mobile browser's viewport how to behave.
<meta name = "viewport" content="width=device-width, initial-scale=1">
BAD practice: 加入maximum-scale=1等限制用户自主选择样式的属性。
Step 2: Fluid layout
BEST practice: use fluid measurement like percentage/em/rem
.
paddings and margins affected by width, not height.
Step 3: Media queries
Fluid layout that is triggered by certain sizes.
ORDERING your rules: default rule always on the top.
Week 3: Framework
Bootstrap 3.0 benefits
- 12-column grid system
- helps with spacing issues
- built-in responsive design
- Common jQuery functionalities
- Accordion, Dorp-down menus, Carousel
- Familiar "look and feel"
- Many sites use Bootstrap
- Makes your forms look "legitimate"
Bootstrap Breakpoints
- Bootstrap hardcodes the breakpoints for different views.
- 部分浏览器不支持小于 300px 的 breakpoint,Bootstrap 支持最小的断点为 320px;
- xs-: minimum width 480px (For most phone)
- sm-: minimum width 768px (Small device and tablets, and smaller window size browser)
- md-: minimum width 992px (Beyond most of phone and tablet)
- lg-: minimum width 1200px
- It it possible to change default value, modify on your need. 默认值可修改,根据需求来
- 不需要知道具体的像素值,只需记住字母对应的含义即可。
Bootstrap Layout System
- Bootstrap layout is based on 12-column grid.
- 3 column = 25%
- 6 column = 50%
- ...
- Every grid consists of:
- A container
- A row
- One or more column classes
- A row
- A container
<div class="container">
<div class="row">
<div class="col-xx-yy">
<!-- xx: viewport size: xs, sm, md, lg -->
<!-- yy: number of columns: 0..12 -->
<!-- These are often combined: -->
<img src="pic.jpg" class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
如果元素是块级元素,无需指定 12 column 的属性。
<div class=“col-xs-12 col-md-3”>Yellow Part</div>
等价于:
<div class=“col-md-3”>Yellow Part</div>
Positioning classes
- On viewports md and up, there is an option for push and pull class.
col-XX-push-YY
=> move YY columns to the
rightcol-XX-pull-YY
=> move YY columns to the
left
Responsive utility classes
hidden-XX
content will only be hidden on the XX screen sizevisible-XX
content will only be visible on the XX screen sizesr-only
content is hidden on all devices except screen readers
Responsive web design 学习笔记的更多相关文章
- (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
随机推荐
- 使用Pechkin与CPechkin生成PDF
1. Pechkin 从NuGet程序管理器中获得Pechkin,代码示例如下: GlobalConfig config = new GlobalConfig(); ...
- (转) Apache Shiro 使用手册(三)Shiro 授权
解惑之处: 使用冒号分隔的权限表达式是org.apache.shiro.authz.permission.WildcardPermission 默认支持的实现方式. 这里分别代表了 资源类型:操作:资 ...
- 【bzoj2523】【CTSC2001】聪明的学生
真是神仙题,做完后感觉智商提(jiang)升(di)了 这种题一般都是把局面设成状态,然后发现可以由一种状态转移到另一种状态,那就是 $dp$ 了. 但是这道题怎么设呢? 题目中给了你一个结论,一般题 ...
- 二分答案 + multiset || NOIP 2018 D1 T3 || Luogu P5021 赛道修建
题面:P5021 赛道修建 题解:二分答案,用Dfs进行判断,multiset维护. Dfs(x,fa,Lim)用来计算以x为根的子树中有多少符合条件的路径,并返回剩余未使用的最长路径长. 贪心思想很 ...
- VS插件CodeRush for Visual Studio全新发布v19.1.7|附下载
CodeRush是一个强大的Visual Studio® .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验. CodeRush能帮助你以极高的效率创建和维护源代码.Consum ...
- k8sDaemonSet控制器
DaemonSet用于再集群中的全部节点上同时运行一份指定的pod资源副本,后续新加入的工作节点也会自动创建一个相关的pod对象,当从集群中移除节点时,此类pod对象也将被自动回收而无须重建.也可以使 ...
- python进阶ing——创建第一个Tornado应用
python进阶ing——创建第一个Tornado应用 分类: Python2013-06-02 23:02 1725人阅读 评论(2) 收藏 举报 pythonTornado 每天在群里跟很多群友讨 ...
- printf计算参数是从右到左压栈的(a++和++a的压栈的区别)
一.问题 c++代码: #include <iostream> #include <stdio.h> using namespace std; int main(){ ; co ...
- 【winfrom-右击快捷菜单】右击或左击时显示快捷菜单
拖个contextMenuStrip控件 按钮的MouseDown事件: private void treeView1_MouseDown(object sender, MouseEventArgs ...
- 日志管理-rsyslog日志服务器及loganalyzer
一,日志基础 日志:记录时间,地点,任务,事件 格式:日期时间 主机 进程[pid]: 事件内容 rsyslog 特性: 多线程,UDP, TCP, SSL, TLS, RELP,MySQL, PGS ...