Bootstrap响应式Web开发笔记01——基础入门

Bootstrap响应式Web开发笔记01——基础入门

Bootstrap响应式Web开发笔记02——移动端页面布局

Bootstrap响应式Web开发笔记03——Bootstrap栅格系统

Bootstrap响应式Web开发笔记04——常用组件

一、视口

1.视口概述

在移动端浏览器中，存在着3中视口，分别是布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。

• 布局视口：网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度，效果如图所示。布局视口在移动端中比较小不能完美的展示网页。
• 视觉视口：用户正在看到的网站的区域，这个区域等同于移动设备的浏览器窗口的宽度。手机端看等同宽度的网页
• 理想视口：设备来说最理想的视口，网页宽度和手机屏幕一致。

2.利用<meta>标签设置视口

在meta标签中，将name属性设为viewport，即可设置视口。

<meta name="viewport" content="width=device-width">

参数名	说明
width	设置视口宽度，可以设置为正整数（像素）或特殊值device-width
height	设置视口高度，可以设为正整数（像素）或特殊值device-height
initial-scale	初始缩放比，取值范围0.0~10.0
maximum-scale	最大缩放比，取值范围0.0~10.0
minimum-scale	最小缩放比，取值范围0.0~10.0
user-scalable	用户是否可以缩放，其值为yes或no

二、移动Web页面的样式编写

1.利用Normalize.css初始化默认样式

a.Normalize.css源码

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

b.引入

<link rel="stylesheet" href="normalize.css">

2.box-sizing设置盒子宽度

• content-box（默认值）：传统的宽度计算方式，内容+边框+边距。
• border-box：新的计算方式，宽度即为所有属性宽度的总和，所见即所得。

.box {
    /* 传统计算方式 */
	box-sizing: content-box;
	/* 新的计算方式 */
	box-sizing: border-box;
}

3.设置移动端的特殊样式

为了让Web页面风格更像手机app通常设置一些特殊样式

样式	说明
-webkit-tap-highlight-color:transparent;	去除超链接按下时默认的高亮效果（设置透明）
-webkit-appearance:none;	去除按钮原生样式
-webkit-touch-callout:none;	禁止长按页面时弹出菜单
-webkit-user-select:none;	禁止文本被手动选择

三、分辨率和设备像素比

手机像素可能跟电脑像素不太一样需要注意像素比

四、二倍图

1.概念

当设备像素比很大是，图片就会被放大，而放大的图片就会变得模糊。为此我们可以用二倍图的方式来提高图片的清晰度。

简单来说就是将像素两倍的图用小的像素比例显示在网页上面。

2.背景图片的缩放

img {
    background-size: 200px 200px;
	background-size: 100% 100%;
	background-size: cover;
	background-size: contain;
}

属性值	说明
cover	把背景图像扩展至足够大，以便背景图像完全覆盖背景区域
contain	把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

五、SVG矢量图

1.基础属性

SVG使用标签的方式定义各种图形，外层标签是

属性	说明
width	用来控制SVG视图宽度
height	用来控制SVG视图的宽度
viewBox	定义用户事业的位置及大小

2.预定义标签

在<svg>标签内部，可以使用SVG提供的一些预定义的标签来绘制图形，或者绘制文字。常用的内部标签如表所示。

标签名	说明
<rect>	矩形标签
<circle>	圆形标签
<ellipse>	椭圆形标签
<line>	线段标签
<polyline>	折线标签
<polygon>	多边形标签
<path>	路径标签
<text>	文字标签
<tspan>	类似<span>,用在<text>内部单独设置样式

3.内部标签属性样式

属性名	属性值	说明
fill	String	定义填充颜色以及文字颜色
fill-opacity	0~1之间的浮点数	定义填充颜色的透明度
stroke	String	定义描边的颜色
stroke-width	大于0的浮点数	定义描边的宽度
stroke-opacity	0~1之间的浮点数	定义描边的颜色的透明度
opacity	0~1之间的浮点数	定义整个图形元素的透明度
transform	translate(x,y)	平移
	scale(x,y)	缩放
	rotate(angle,[cx,cy])	旋转
	skewX(angel)skewY(angel)	倾斜

4.SVG的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1.0"/>
    <title>Title</title>
</head>
<body>
<!--圆-->
<svg width="100%" height="100%">
    <circle cx="100" cy="100" r="50"
            stroke="black" stroke-width="2"
            fill="#ddd">
    </circle>
</svg>
<!--矩形-->
<svg width="100%" height="100%">
    <rect width="100" height="50"
          stroke-width="2" stroke="pink"
          fill="blue">
    </rect>
</svg>
<!--椭圆-->
<svg width="100%" height="100%">
    <ellipse rx="100" ry="50" cx="100" cy="50"
             stroke="yellow" stroke-width="2"
             fill="red"
    >
    </ellipse>
</svg>
<!--直线-->
<svg width="100%" height="100%">
    <line x1="0" y1="0" x2="300" y2="100"
          stroke="red" stroke-width="10">
    </line>
</svg>
<!--多边形-->
<svg width="100%" height="100%">
    <polygon points="20,1 25,19 16,21"
             stroke="red" stroke-width="2"
             fill="green"
    >
    </polygon>
</svg>
<!--外部svg图片引用-->
<img src="../img/编辑.svg">
<img src="../img/mysvg.svg">
<iframe src="../img/mysvg.svg" width="100px" height="100px"></iframe>
</body>
</html>