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

这里是一个响应式设计网站的范例。

测试网站是否响应式的方法:

  1. 调整浏览器大小。
  2. 使用ami.responsivedesign.is帮助判断。
  3. 使用 Chrome/Firefox Dev Tools。

让网页适应页面大小的三种选项

  1. Responsive Web Design(RWD) - fluid measurements, flexible grids, and varying CSS rules.同一套代码,通过检测meta name=viewport实现。能优化搜索引擎分数。
  2. Adaptive Design - returns one of multiple versions of a page based on the type of device.根据不同设备返回不同代码。
  3. 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...)

  1. Responsive Web Design: Using Fonts Responsibly by Annarita Tranfici
  2. Web Design Basics: Rem vs. Em vs. PX - Sizing Elements in CSS by Matthew Davis
  3. What's the Deal with Em and Rem?
  4. Font Size Idea: px at the Root, rem for Components, em for Text Elements by Chris Coyier
  5. 综合指南: 何时使用 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

  1. A media type(screen, print, all, ...)

  2. 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
<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

      right
    • col-XX-pull-YY => move YY columns to the

      left

Responsive utility classes

  • hidden-XX content will only be hidden on the XX screen size
  • visible-XX content will only be visible on the XX screen size
  • sr-only content is hidden on all devices except screen readers

Responsive web design 学习笔记的更多相关文章

  1. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

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

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  3. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  4. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  5. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  8. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  9. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

随机推荐

  1. 使用Pechkin与CPechkin生成PDF

    1. Pechkin     从NuGet程序管理器中获得Pechkin,代码示例如下:             GlobalConfig config = new GlobalConfig();   ...

  2. (转) Apache Shiro 使用手册(三)Shiro 授权

    解惑之处: 使用冒号分隔的权限表达式是org.apache.shiro.authz.permission.WildcardPermission 默认支持的实现方式. 这里分别代表了 资源类型:操作:资 ...

  3. 【bzoj2523】【CTSC2001】聪明的学生

    真是神仙题,做完后感觉智商提(jiang)升(di)了 这种题一般都是把局面设成状态,然后发现可以由一种状态转移到另一种状态,那就是 $dp$ 了. 但是这道题怎么设呢? 题目中给了你一个结论,一般题 ...

  4. 二分答案 + multiset || NOIP 2018 D1 T3 || Luogu P5021 赛道修建

    题面:P5021 赛道修建 题解:二分答案,用Dfs进行判断,multiset维护. Dfs(x,fa,Lim)用来计算以x为根的子树中有多少符合条件的路径,并返回剩余未使用的最长路径长. 贪心思想很 ...

  5. VS插件CodeRush for Visual Studio全新发布v19.1.7|附下载

    CodeRush是一个强大的Visual Studio® .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验. CodeRush能帮助你以极高的效率创建和维护源代码.Consum ...

  6. k8sDaemonSet控制器

    DaemonSet用于再集群中的全部节点上同时运行一份指定的pod资源副本,后续新加入的工作节点也会自动创建一个相关的pod对象,当从集群中移除节点时,此类pod对象也将被自动回收而无须重建.也可以使 ...

  7. python进阶ing——创建第一个Tornado应用

    python进阶ing——创建第一个Tornado应用 分类: Python2013-06-02 23:02 1725人阅读 评论(2) 收藏 举报 pythonTornado 每天在群里跟很多群友讨 ...

  8. printf计算参数是从右到左压栈的(a++和++a的压栈的区别)

    一.问题 c++代码: #include <iostream> #include <stdio.h> using namespace std; int main(){ ; co ...

  9. 【winfrom-右击快捷菜单】右击或左击时显示快捷菜单

    拖个contextMenuStrip控件 按钮的MouseDown事件: private void treeView1_MouseDown(object sender, MouseEventArgs ...

  10. 日志管理-rsyslog日志服务器及loganalyzer

    一,日志基础 日志:记录时间,地点,任务,事件 格式:日期时间 主机 进程[pid]: 事件内容 rsyslog 特性: 多线程,UDP, TCP, SSL, TLS, RELP,MySQL, PGS ...