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>

Bootstrap响应式Web开发笔记01——基础入门相关推荐

Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
前端web：响应式Web开发优缺点总结
因为越来越多的智能移动设备(mobile,tabletdevice)加入到互联网中来,移动互联网不再是独立的小网络了,而是成为了Internet的重要组成部分.响应式网络设计(RWD/AWD)的出现, ...
响应式web开发网页案例 ——29款表单模板
如果你正在寻找有趣的响应式web开发网页案例,那你找对地方了.本文与大家分享一下,点击图片即可下载. 1. [网页响应式开发]粉红简洁登录框表单模板大小:124 KB 下载地址:http://www ...
Web大学生网页作业成品 bootstrap响应式网站开发基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)
CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
文章目录 CSS的浮动框1{float:none;} 框1{float:right;} 框1{float:left;} 框1.2.3{float:left;} CSS的定位浮动和定位的使用区别 C ...
HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下. <标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签 ...
CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
CSS中的一个基本概念就是盒子模型,所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域,即元素的盒子. 盒子由margin(外边距).border(边框).padding(内边距).conten ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...
响应式web开发chapter2/demo03
字体文件/百度网盘链接矢量图的插入:还是与chapter2/demo02连接css字体文件的方式一样.css文件内包含了矢量图. 保证css文件与demo03文件在一个文件夹内. <!DOCT ...