Download link: https://pan.baidu.com/s/1PWMM4pAzb9QedsBcKzLd-A Password: cce6
- Publisher: People's Posts and Telecommunications Press; 1st edition (July 1, 2016)
- Foreign Book Name: MySQL (5th Edition)
- Paperback: 207 pages
- Language: Simplified Chinese
- Format: 16
- ISBN: 7115422168, 9787115422163
- Barcode: 9787115422163
- Product size: 22.6 x 16.8 x 1 cm
- Item weight: 322 g
- Brand: People's Posts and Telecommunications Publishing House
- ASIN: B01H0JZI7I
Editor's Choice
1. Introduce new responsive solutions.
2. Explain in simple language, trigger from the basics, and gradually introduce higher-level technologies.
3. Pay attention to actual combat, apply knowledge to practice, and solve problems that are being encountered or will be encountered.
4. Know what is and why, understand the past and present of technology; develop thinking and dig more solutions.
About the Author
Li Guangyi worked at iQIYI and is currently a senior front-end engineer at Baidu, mainly responsible for front-end Web product development and back-end Node.js framework maintenance. He has some experience in front-end technologies such as HTML and JavaScript, and likes to nitpick about Web performance. He also has a strong interest in ASP.NET, MongoDB, Python and other technologies. In my spare time, I used to like tossing hardware programming, such as Kinect for Windows, Leap Motion, etc., and now I like to use Unity to write games. Love the front end and love to share.
content
Chapter 1 Overview and Task Introduction 1
1.1 Why Responsive Design is Needed 1
1.1.1 Product Form Needs 1
1.1.2 Performance and Business Considerations 3
1.2 The Book's Clues 3
1.3 Writing Ideas 4
1.4 Defining Responsiveness 5
1.5 This Book Task 6
Chapter 2 Responsive Problems 9
2.1 Pixel Density 9
2.2 CSS Pixel 14
2.3 Viewport 17
2.3.1 Desktop Browser Viewport 17
2.3.2 Mobile Browser Viewport 18
2.3.3 Device Width 20
Summary 21
Chapter 3 Layout 23
3.1 Words written before coding 23
3.1.1 Write good code 24
3.1.2 Browser adaptation of code 25
3.1.3 Look up at the stars and keep your feet on the ground 26
3.2 Global styles 27
3.3 Impeccable Navigation Bar 30
3.3.1 Desktop 30
3.3.2 Mobile Navigation Bar 37
Summary 40
Chapter 4 Layout - Responsive 41
4.1 Media Queries 41
4.1.1 Why Media Queries are Needed 41
4.1.2 What Are Media Queries 44
4.1 .3 Logic in Media Queries 45
4.1.4 Strategies for Media Queries 46
4.1.5 Navigation Bars and Media Queries 51
4.1.6 Polyfill 56
4.2 Flexbox Layout 58
4.2.1 Why You Need a Flex Layout 58
4.2.2 Quick Start 58
4.2.3 Basic Applications 60
4.2.4 Regression Navigation Bar flexbox.css 62
4.3 Relative Units 63
4.3.1 Relative unit em 65
4.3.2 Relative unit rem 67
4.3.3 How to use these units 68
4.4 Title layout 70
4.4.1 Background 71
4.4.2 Text centering 73
4.5 Responsive text 79
4.5.1 Title 79
4.5.2 Body Content 83
Summary 89
Chapter 5 Responsive Images 91
5.1 100% Omnipotent 91
5.2 Responsive Graph Use Cases 93
5.3 srcset Syntax 96
5.3.1 Mobile-First or Desktop-First 97
5.3.2 Planning Not Keeping Up with Changes 98
5.3.3 Paternalistic 99
5.4 The <picture> element 99
5.4.1sizes 99
5.4.2 The <picture> and <source> elements 102
5.4.3 The polyfill 105
5.4.4 The future of the <picture> element 105
5.5 Abandoning images 105
5.5.1 In fact we don't need images 105
5.5.2 Data URIs 105
5.5.3 CSS shapes 107
5.5.4 Icon fonts 110
5.6 Backend schemes 118
5.6.1 Frontend configuration 118
5.6.2 Backend configuration 119
5.6.3 Note 119
5.7 Optimizing Background Images for Titles 120
5.7.1 image—set 120
5.7.2 Progressive Images 120
5.7.3 Media Queries 122
5.7.4 No Images 123
Summary 124
Chapter 6 Scripting and Performance: Getting Started 125
6.1 Why Scripting 125
6.2 Why Talking About Performance 126
6.3 How to Measure Performance 126
6.3.1 Page Load Time 127
6.3.2 Speed Index—Load Time Isn’t Everything 129
6.3.3 Frames 133
6.3.4 Tools and Testing 136
6.4 Traditional Scripting Performance Optimization Guide 147
6.4.1 Lazy Loading Primary Version 147
6.4.2 Optimization Point 1: Scroll Event Callbacks 153
6.4.3 Optimization Point 2: Redraw and Reflow 157
6.4.4 Optimization Point 3: Selectors 161
Summary 163
Chapter 7 Scripts and Performance: Improvements 165
7.1 Avoiding Scripts 165
7.1.1 Style Implementation 166
7.1.2 Script Implementation 168
7.1.3 Back to Navigation Bar 170
7.2 Packaging and Loaders 175
7.3 Performance Optimization Ideas 181
7.4 Backend Can Do What 185
7.4.1 RESS 185
7.4.2 Other 187
Summary 187
Chapter 8 Engineering Issues 189
8.1 Installing Node.js 189
8.2 Bower 192
8.2.1 What is Bower 192
8.2.2 Installing Bower 193
8.2.3 Using Bower 194
8.2.4 Advanced use 195
8.3 Grunt 198
8.3.1 What is Grunt 198
8.3.2 Install Grunt 198
8.3.3 Use Grunt 199
8.4 Yeoman 203
8.4.1 What is Yeoman 203
8.4.2 Install Yeoman 204
8.4.3 Generate a project 205
Summary 206
Postscript 207
abstract
版权页： 
插图： 
8.3 Grunt
8.3.1 什么是Grunt
通常在网页上线前，需要进行一系列打包和准备工作，例如，使用JSHint对代码质量进行检查，使用UglifyJS对代码进行压缩和拼接，编译SasS以及对图片压缩优化等。这些操作的特点是，每次上线前的流程都是一致的、机械的、几乎无需人工干预。但是，如果每次都手动运行这些命令，对操作人员来说也是一件感觉有点儿鸡肋的事。操作人员希望有工具能将这些任务组合起来，一键命令就能够让这些任务井然有序的运行。Grunt就是这么一个工具。
8.3.2 安装Grunt
与Bower相同，首先需要通过npm在全局安装Grunt：
npm install—g grunt—cli
这里我们只是将Grunt工具安装完毕，它还无法实现压缩、图片优化等功能。如果需要实现对应的功能，还需要安装对应的Grunt插件。在上线之前希望做3件事：首先是将JavaScript脚本压缩并且合并，其次对less代码进行编译，最后再对图片进行优化。对应这3个功能，需要分别安装3个Grunt插件，即contrib—uglify、contrib—less和contrib—imagemin。