├── LICENSE
├── README.md
├── build
    ├── build.js
    ├── conf.js
    ├── start_server.js
    ├── webpack.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── dist
    ├── 72216371c42c4673a8e6fa245ef14f4e.jpg
    ├── index.324c44be0c24fc19c869.js
    └── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
└── src
    ├── css
        ├── index.css
        └── lib
        │   └── reset.css
    ├── images
        ├── 18-CONTACTUS-HEADER.jpg
        ├── Galaxy Note 3.png
        ├── Galaxy S5.png
        ├── Nexus 7.png
        ├── iPad Pro.png
        ├── iPad.png
        ├── iPhone 5_SE.png
        ├── iPhone 6_7_8 Plus.png
        ├── iPhone 6_7_8.png
        ├── iPhone X.png
        ├── 华为P10 PLUS 1440_2560.png
        └── 华为P20.png
    ├── js
        ├── app.js
        └── index.js
    └── tpl
        └── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 曹小科
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # html-vw-layout
  2 | 
  3 | 骚年，放飞自我吧！放心使用 vw 来做适配～
  4 | 
  5 | 移动端h5 vw 适配，基于webpack4 打包多页面html demo、支持es6，开箱即用。
  6 | 
  7 | 适合小白哈，大佬看到点完小星星✨再绕路～小白也别忘记了点个星星！谢谢～
  8 | 
  9 | <br/>
 10 | 1、在这里很多人有疑问，为什么要用vw 单位来做适配？vw 和 我们常用rem适配方案有什么优缺点？
 11 | <br/>
 12 | <br/>
 13 | 我相信大家对vw 和 rem 单位不会陌生。
 14 | <p>
 15 | vw、vh、vmin、vmax 这四个单位都是相对于视口的宽度。视口被均分为100单位的vw ：
 16 | </p>
 17 | <p>
 18 | vw、vh
 19 | vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100。
 20 | 假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）。
 21 | 	
 22 | vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100。
 23 | 假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。
 24 | </p>
 25 | <p>
 26 | vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
 27 | </p>
 28 | <p>
 29 | 如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px。
 30 | 如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px。
 31 | </p>
 32 | <br/>
 33 | 弹性布局通常指的是rem或em布局，rem是相对于html元素的font-size大小而言的，而em是相对于其父元素（非font-size的是相对于自身的font-size）。
 34 | 10px == 62.5%
 35 | 
 36 |  ```html 
 37 | html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
 38 | body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
 39 | h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
 40 | ``` 
 41 | <br/>
 42 | 不管vw 还是rem 都是非常不错的一个长度单位，rem 适配的代表Flexible.js 方案，被绝大部分公司引用，2013年那时，移动端兴起，需要适配多端。
 43 | <br/>
 44 | 当时rem 和 vw 两个选择？
 45 | vw 在当时的条件下不够成熟用来做适配的方案，因为那时候的厂商对vw 的适配支持率低、兼容性差。但是现在对移动端来说，大部分都已经支持vw的适配了，具体兼容的数据，可以看 =>2 
 46 | 
 47 | rem 的弹性布局，在当时无疑成了不二的选择，兼容性好，不过有些小问题，都能hack，flexible可以说是一个非常优秀的方案，也承载了一段时期的适配使命。大家有时间可以翻翻flexible 的源码，通过js 动态改变根节点，来使rem 单位达到适配多端的效果。
 48 | 
 49 | rem 是根据各种规则计算一个宽度，然后把根元素的字体尺寸设置成这个宽度，然后使用rem设置各种子元素的宽度。其实最终rem 也是在模拟 vw ,那在现在大部分厂商都支持vw ，并且也有降级处理方案可以hack，我们何不直接用vw 呢，相信未来会有越来越多的厂商完善支持vw。
 50 | 
 51 | 包括flexible 团队也建议大家可以放弃使用这个过渡的方案，可以采用vw 来解决适配问题。
 52 | 
 53 | <br/>
 54 | 2、现在对vw 的兼容性支持情况？
 55 | <br/>
 56 | <p>
 57 |   在移动端 iOS 8 以上、 Android 4.4 以上、包括微信浏览器 新版x5 都支持vw。
 58 |   <br/>
 59 |   可以在 <a href="https://caniuse.com/#search=vw">Can I use</a> 或者 <a href="https://airen.github.io/css3test/css3test">css3test</a> 查看兼容情况
 60 | </p>
 61 | <p>
 62 |   想要适配低版本浏览器、低端机型也不是什么问题、也给出了解决方案。请看 => 3
 63 | 	
 64 |   在几年前vw 之所以没有流行起来的原因，还是因为在当时兼容性不够，讲白了，就是坑多、大家都不愿意做第一个躺坑的人。<br/>
 65 |   几年时间过去，各大厂商对vw 对兼容升级、低端机型占比逐步减少，vw 的适配方案也慢慢的浮出了水面，大家重新对它有了新的认识。包括我们业界知名的大漠，他们在手淘已经对vw 适配方案有了一年多的实践时间。
 66 | </p>
 67 | <br/>
 68 | 3、不支持vw 的浏览器的解决方案？
 69 |  <br/>
 70 |  低版本浏览器、低端机型不支持的情况下，我们可以hack ，在部分浏览器上不显示图片，可以加上全局解决 img {content: normal !important}
 71 |  <a href="https://github.com/rodneyrehm/viewport-units-buggyfill"> https://github.com/rodneyrehm/viewport-units-buggyfill </a>
 72 |  项目中引用
 73 |  <br/> 
 74 |  
 75 |  ```html 
 76 | <head>
 77 |     <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
 78 | </head>
 79 | 
 80 | <body>
 81 | <script>
 82 | 	window.onload = function () {
 83 | 		window.viewportUnitsBuggyfill.init({
 84 | 			hacks: window.viewportUnitsBuggyfillHacks
 85 | 		});
 86 | 	}
 87 | </script>
 88 | <body>
 89 | ``` 
 90 | <br/>
 91 | <br/>
 92 | 如果你已经装了git 的话，可以走以下步骤。
 93 | <br/>
 94 | git clone https://github.com/caoxiaoke/html-vw-layout.git
 95 | <br/>
 96 | cd html-vw-layout
 97 | <br/>
 98 | <br/>
 99 | <p>
100 | 	执行步骤：npm install 或者 sudo npm install
101 | </p>
102 | <p>
103 | 	开发环境 npm run start || 开发环境 http://localhost:8080 查看效果
104 | </p>
105 | <p>
106 | 	生产打包 npm run build
107 | </p>
108 | <br/>
109 | 
110 | 如果你不使用react 也不使用vue ，在项目中只使用html页面 vw实现移动端适配，请点这 <a href="https://github.com/caoxiaoke/html-vw-layout">《如何在html项目中使用vw实现移动端适配》</a>
111 | <br/>
112 | 
113 | 在react项目中使用vw实现移动端适配 请参考
114 | <a href="https://github.com/caoxiaoke/react-vw-layout">《如何在react项目中使用vw实现移动端适配》</a>
115 | <br/>
116 | 
117 | 在vue项目中使用vw适配 请参考
118 | <a href="https://www.w3cplus.com/mobile/vw-layout-in-vue.html">《如何在Vue项目中使用vw实现移动端适配》</a>
119 | <br/>
120 | 
121 | ###Demo
122 | <br/>
123 | Galaxy Note 3
124 | <br/>
125 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Galaxy%20Note%203.png
126 | <br/>
127 | <br/>
128 | Galaxy S5
129 | <br/>
130 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Galaxy%20S5.png
131 | <br/>
132 | <br/>
133 | Nexus 7
134 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Nexus%207.png
135 | <br/>
136 | <br/>
137 | iPad Pro
138 | <br/>
139 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPad%20Pro.png
140 | <br/>
141 | iPad
142 | <br/>
143 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPad.png
144 | <br/>
145 | <br/>
146 | iPhone 5_SE
147 | <br/>
148 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%205_SE.png
149 | <br/>
150 | <br/>
151 | iPhone 6_7_8 Plus
152 | <br/>
153 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%206_7_8%20Plus.png
154 | <br/>
155 | <br/>
156 | iPhone 6_7_8
157 | <br/>
158 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%206_7_8.png
159 | <br/>
160 | <br/>
161 | iPhone X
162 | <br/>
163 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%20X.png
164 | <br/>
165 | <br/>
166 | 华为P10 PLUS 1440_2560
167 | <br/>
168 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/%E5%8D%8E%E4%B8%BAP10%20PLUS%201440_2560.png
169 | <br/>
170 | <br/>
171 | 华为P20
172 | <br/>
173 | https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/%E5%8D%8E%E4%B8%BAP20.png
174 | <br/>
175 | <br/>
176 | 
177 | iPhone 6_7_8
178 | <br/>
179 | ![Image text](https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%206_7_8.png)
180 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var webpackConfig = require('./webpack.prod.conf');
 3 | 
 4 | webpack(webpackConfig, function (err, stats) {
 5 |   if (err) throw err
 6 |   process.stdout.write(stats.toString({
 7 |     colors: true,
 8 |     modules: false,
 9 |     children: false,
10 |     chunks: false,
11 |     chunkModules: false
12 |   }) + '\n')
13 | })


--------------------------------------------------------------------------------
/build/conf.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | module.exports = {
3 |     srcRoot: path.resolve(__dirname, '../src'),
4 |     outputRoot: path.resolve(__dirname, '../output'),
5 |     distRoot: path.resolve(__dirname, '../dist')
6 | }


--------------------------------------------------------------------------------
/build/start_server.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const path = require('path');
 3 | const Webpack = require('webpack');
 4 | const WebpackDevServer = require('webpack-dev-server');
 5 | const webpackDevConfig = require('./webpack.dev.conf');
 6 | 
 7 | const options = {
 8 |   contentBase: path.resolve(__dirname, 'src/tpl'),
 9 |   publicPath: '/',
10 |   hot: true,
11 |   port: 8080,
12 |   host: 'localhost',
13 |   stats: {
14 |     colors: true
15 |   }
16 | }
17 | 
18 | WebpackDevServer.addDevServerEntrypoints(webpackDevConfig, options);
19 | 
20 | const compiler = Webpack(webpackDevConfig);
21 | const server = new WebpackDevServer(compiler, options);
22 | 
23 | server.listen(8080, '0.0.0.0', () => {
24 |   console.log('Starting server on http://localhost:8080');
25 | });
26 | 


--------------------------------------------------------------------------------
/build/webpack.conf.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs');
 2 | var path = require('path');
 3 | var webpack = require('webpack');
 4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 6 | var config = require('./conf.js');
 7 | 
 8 | var webpackConfig = {
 9 |   entry: {},
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.js$/,
14 |         use: [
15 |           { loader: 'babel-loader' }
16 |         ],
17 |         include: config.srcRoot
18 |       },
19 | 		{
20 | 			test: require.resolve('zepto'),
21 | 			loader: 'exports-loader?window.Zepto!script-loader'
22 | 		}
23 |     ]
24 |   },
25 |   plugins: [
26 |     new WebpackCleanupPlugin(),
27 |   ]
28 | }
29 | 
30 | 
31 | let filenames = fs.readdirSync(path.resolve(config.srcRoot, 'tpl'));
32 | 
33 | filenames.forEach(function (filename) {
34 |   let stats = fs.statSync(path.resolve(config.srcRoot, 'tpl', filename));
35 |   if (stats.isFile()) {
36 |     let extension = path.extname(filename);
37 |     let name = filename.substring(0, filename.lastIndexOf(extension));
38 |     console.log('>>> ', name);
39 |     webpackConfig.entry[name] = path.resolve(config.srcRoot, 'js', name + '.js')
40 |     webpackConfig.plugins.push(new HtmlWebpackPlugin({
41 |       filename: name + '.html',
42 |       template: path.resolve(config.srcRoot, 'tpl', name + '.html'),
43 |       inject: true,
44 |       chunks: ['common', name] //只包含 common 以及自己的那一个 chunk
45 |     }));
46 |   }
47 | });
48 | 
49 | module.exports = webpackConfig;
50 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
  1 | const config = require('./conf.js');
  2 | const webpackConfig = require('./webpack.conf.js');
  3 | const webpack = require('webpack');
  4 | const merge = require('webpack-merge');
  5 | //vw
  6 | const autoprefixer = require('autoprefixer');
  7 | const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
  8 | const postcssPxToViewport = require('postcss-px-to-viewport');
  9 | const postcssWriteSvg = require('postcss-write-svg');
 10 | const postcssCssnext = require('postcss-cssnext');
 11 | const postcssViewportUnits = require('postcss-viewport-units');
 12 | const cssnano = require('cssnano');
 13 | 
 14 | const webpackDevConfig = {
 15 | 	mode: 'development',
 16 | 	output: {
 17 | 		path: config.outputRoot,
 18 | 		filename: '[name].js'
 19 | 	},
 20 | 	module: {
 21 | 		rules: [
 22 | 			{
 23 | 				test: /\.css$/,
 24 | 				use: [
 25 | 					require.resolve('style-loader'),
 26 | 					{
 27 | 						loader: require.resolve('css-loader'),
 28 | 						options: {
 29 | 							importLoaders: 1,
 30 | 							modules: false,
 31 | 						},
 32 | 					},
 33 | 					{
 34 | 						loader: require.resolve('postcss-loader'),
 35 | 						options: {
 36 | 							// Necessary for external CSS imports to work
 37 | 							// https://github.com/facebookincubator/create-react-app/issues/2677
 38 | 							ident: 'postcss',
 39 | 							plugins: () => [
 40 | 								require('postcss-flexbugs-fixes'),
 41 | 								autoprefixer({
 42 | 									browsers: [
 43 | 										'>1%',
 44 | 										'last 4 versions',
 45 | 										'Firefox ESR',
 46 | 										'not ie < 9', // React doesn't support IE8 anyway
 47 | 									],
 48 | 									flexbox: 'no-2009',
 49 | 								}),
 50 | 								postcssAspectRatioMini({}),
 51 | 								postcssPxToViewport({
 52 | 									viewportWidth: 750, // (Number) The width of the viewport.
 53 | 									viewportHeight: 1334, // (Number) The height of the viewport.
 54 | 									unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
 55 | 									viewportUnit: 'vw', // (String) Expected units.
 56 | 									selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
 57 | 									minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
 58 | 									mediaQuery: false // (Boolean) Allow px to be converted in media queries.
 59 | 								}),
 60 | 								postcssWriteSvg({
 61 | 									utf8: false
 62 | 								}),
 63 | 								postcssCssnext({}),
 64 | 								postcssViewportUnits({}),
 65 | 								cssnano({
 66 | 									  "cssnano-preset-advanced": {
 67 | 										zindex: false,
 68 | 										autoprefixer: false
 69 | 									      }
 70 | 								})
 71 | 							],
 72 | 						},
 73 | 					},
 74 | 				],
 75 | 			},
 76 | 			{
 77 | 				test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
 78 | 				loader: 'file-loader',
 79 | 				options: {
 80 | 					limit: 10000
 81 | 				}
 82 | 			},
 83 | 			{
 84 | 				test: /\.html$/,
 85 | 				use: [{
 86 | 					loader: 'html-loader',
 87 | 					options: {
 88 | 						minimize: true
 89 | 					}
 90 | 				}],
 91 | 			}
 92 | 		]
 93 | 	},
 94 | 	devtool: '#eval-source-map-inline'
 95 | }
 96 | 
 97 | let plugins = [
 98 | 	new webpack.NamedModulesPlugin(),
 99 | 	new webpack.HotModuleReplacementPlugin(),
100 | ]
101 | webpackConfig.plugins.push.apply(webpackConfig.plugins, plugins);
102 | 
103 | module.exports = merge(webpackConfig, webpackDevConfig);
104 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | const webpack = require('webpack');
  2 | const merge = require('webpack-merge');
  3 | const config = require('./conf.js');
  4 | const webpackConfig = require('./webpack.conf.js');
  5 | const OptimizeCSSPlugin  = require("optimize-css-assets-webpack-plugin");
  6 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  7 | 
  8 | //vw
  9 | const autoprefixer = require('autoprefixer');
 10 | const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
 11 | const postcssPxToViewport = require('postcss-px-to-viewport');
 12 | const postcssWriteSvg = require('postcss-write-svg');
 13 | const postcssCssnext = require('postcss-cssnext');
 14 | const postcssViewportUnits = require('postcss-viewport-units');
 15 | const cssnano = require('cssnano');
 16 | const webpackProdConfig = {
 17 |   mode: 'production',
 18 |   output: {
 19 |     path: config.distRoot,
 20 |     filename: '[name].[chunkhash].js'
 21 |   },
 22 |   module: {
 23 | 	  rules: [
 24 | 		  {
 25 | 			  test: /\.css$/,
 26 | 			  use: [
 27 | 				  {
 28 | 					  loader: MiniCssExtractPlugin.loader,
 29 | 					  options: {
 30 | 						  // you can specify a publicPath here
 31 | 						  // by default it use publicPath in webpackOptions.output
 32 | 						  publicPath: '/'
 33 | 					  }
 34 | 				  },
 35 | 				  {
 36 | 					  loader: require.resolve('css-loader'),
 37 | 					  options: {
 38 | 						  importLoaders: 1,
 39 | 						  modules: false,
 40 | 					  },
 41 | 				  },
 42 | 				  {
 43 | 					  loader: require.resolve('postcss-loader'),
 44 | 					  options: {
 45 | 						  // Necessary for external CSS imports to work
 46 | 						  // https://github.com/facebookincubator/create-react-app/issues/2677
 47 | 						  ident: 'postcss',
 48 | 						  plugins: () => [
 49 | 							  require('postcss-flexbugs-fixes'),
 50 | 							  autoprefixer({
 51 | 								  browsers: [
 52 | 									  '>1%',
 53 | 									  'last 4 versions',
 54 | 									  'Firefox ESR',
 55 | 									  'not ie < 9', // React doesn't support IE8 anyway
 56 | 								  ],
 57 | 								  flexbox: 'no-2009',
 58 | 							  }),
 59 | 							  postcssAspectRatioMini({}),
 60 | 							  postcssPxToViewport({
 61 | 								  viewportWidth: 750, // (Number) The width of the viewport.
 62 | 								  viewportHeight: 1334, // (Number) The height of the viewport.
 63 | 								  unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
 64 | 								  viewportUnit: 'vw', // (String) Expected units.
 65 | 								  selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
 66 | 								  minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
 67 | 								  mediaQuery: false // (Boolean) Allow px to be converted in media queries.
 68 | 							  }),
 69 | 							  postcssWriteSvg({
 70 | 								  utf8: false
 71 | 							  }),
 72 | 							  postcssCssnext({}),
 73 | 							  postcssViewportUnits({}),
 74 | 							  cssnano({
 75 | 								  "cssnano-preset-advanced": {
 76 | 										zindex: false,
 77 | 										autoprefixer: false
 78 | 									      }
 79 | 							  })
 80 | 						  ],
 81 | 					  },
 82 | 				  },
 83 | 			  ],
 84 | 		  },
 85 | 		  {
 86 | 			  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
 87 | 			  loader: 'file-loader',
 88 | 			  options: {
 89 | 				  limit: 10000
 90 | 			  }
 91 | 		  },
 92 | 		  {
 93 | 			  test: /\.html$/,
 94 | 			  use: [{
 95 | 				  loader: 'html-loader',
 96 | 				  options: {
 97 | 					  minimize: true
 98 | 				  }
 99 | 			  }],
100 | 		  }
101 | 	  ]
102 |   },
103 | 	devtool: 'false'
104 | 
105 | }
106 | 
107 | let plugins = [
108 | 	new MiniCssExtractPlugin({
109 | 		filename: "[name].[chunkhash].css",
110 | 		chunkFilename: "[id].[chunkhash].css"
111 | 	}),
112 | 	new OptimizeCSSPlugin({
113 | 		cssProcessorOptions: {
114 | 			safe: true
115 | 		}
116 | 	})
117 | ]
118 | webpackConfig.plugins.push.apply(webpackConfig.plugins, plugins);
119 | module.exports = merge(webpackConfig, webpackProdConfig);
120 | 


--------------------------------------------------------------------------------
/dist/72216371c42c4673a8e6fa245ef14f4e.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/dist/72216371c42c4673a8e6fa245ef14f4e.jpg


--------------------------------------------------------------------------------
/dist/index.324c44be0c24fc19c869.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[n].concat(i).concat([o]).join("\n")}var a;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<e.length;o++){var a=e[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){var r,o,i={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(e){var t={};return function(e){return void 0===t[e]&&(t[e]=function(e){return document.querySelector(e)}.call(this,e)),t[e]}}(),c=null,l=0,u=[],f=n(5);function d(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=i[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(m(r.parts[a],t))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(m(r.parts[a],t));i[r.id]={id:r.id,refs:1,parts:s}}}}function p(e,t){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],a=t.base?i[0]+t.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}function h(e,t){var n=s(e.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=u[u.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),u.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function b(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=u.indexOf(e);t>=0&&u.splice(t,1)}function v(e){var t=document.createElement("style");return e.attrs.type="text/css",g(t,e.attrs),h(e,t),t}function g(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function m(e,t){var n,r,o,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var a=l++;n=c||(c=v(t)),r=x.bind(null,n,a,!1),o=x.bind(null,n,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",g(t,e.attrs),h(e,t),t}(t),r=function(e,t,n){var r=n.css,o=n.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,n,t),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=v(t),r=function(e,t){var n=t.css,r=t.media;r&&e.setAttribute("media",r);if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){b(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=p(e,t);return d(n,t),function(e){for(var r=[],o=0;o<n.length;o++){var a=n[o];(s=i[a.id]).refs--,r.push(s)}e&&d(p(e,t),t);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete i[s.id]}}}};var y,w=(y=[],function(e,t){return y[e]=t,y.filter(Boolean).join("\n")});function x(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=w(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}},function(e,t,n){"use strict";n.r(t),n.d(t,"default",function(){return r});n(3),n(6);class r{constructor(){}getInfo(){console.log("123")}}(new r).getInfo()},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]);var o={transform:void 0};n(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(0)(!1)).push([e.i,'a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}',""])},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,r=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var o,i=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(i)?e:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(e,t,n){var r=n(7);"string"==typeof r&&(r=[[e.i,r,""]]);var o={transform:void 0};n(1)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(0)(!1)).push([e.i,'.app{width:100vw;height:26.667vw;background:#f27a7a;color:#fff;line-height:26.667vw;text-align:center;content:"viewport-units-buggyfill; width: 100vw; height: 26.667vw; line-height: 26.667vw"}.list{height:10.667vw;width:96vw;margin:0 auto 1.333vw;border:1px solid #f27a7a;font-size:3.2vw;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:flex;-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;justify-content:center;-ms-flex-align:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;align-items:center;content:"viewport-units-buggyfill; height: 10.667vw; width: 96vw; margin: 0 auto 1.333vw auto; font-size: 3.2vw"}.row{margin:5.333vw 0;content:"viewport-units-buggyfill; margin: 5.333vw 0"}.cat{width:86.667vw;height:53.333vw;margin:0 auto;display:block;content:"viewport-units-buggyfill; width: 86.667vw; height: 53.333vw"}#example{background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiMwMGIxZmYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=");height:1px;width:100%}',""])}]);


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>首页</title> <script src=//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js></script> </head> <body> <div class=app>我做个测试啊aww～</div> <div class=row> <div class=list> 我是测试1啊 </div> <div class=list> 我是测试2啊 </div> <div class=list> 我是测试3啊 </div> <div class=list> 我是测试4啊 </div> </div> <div class=row> <img class=cat src=72216371c42c4673a8e6fa245ef14f4e.jpg> </div> <div id=example> </div> <script>window.onload=function(){window.viewportUnitsBuggyfill.init({hacks:window.viewportUnitsBuggyfillHacks})}</script> <script type="text/javascript" src="index.324c44be0c24fc19c869.js"></script></body> </html> 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "{{name}}",
 3 |   "version": "1.0.0",
 4 |   "description": "{{description}}",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node build/start_server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "build": "node build/build.js",
10 |     "lint": "./node_modules/.bin/eslint --ext .js ./src/js"
11 |   },
12 |   "author": "",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "autoprefixer": "^9.3.1",
16 |     "babel-core": "^6.26.0",
17 |     "babel-loader": "^7.1.4",
18 |     "babel-preset-env": "^1.6.0",
19 |     "babel-preset-es2015": "^6.24.1",
20 |     "css-loader": "^0.28.11",
21 |     "cssnano-preset-advanced": "^4.0.5",
22 |     "express": "^4.16.3",
23 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
24 |     "file-loader": "^2.0.0",
25 |     "html-loader": "^0.5.5",
26 |     "html-webpack-plugin": "^3.2.0",
27 |     "mini-css-extract-plugin": "^0.5.0",
28 |     "normalize.css": "^8.0.1",
29 |     "optimize-css-assets-webpack-plugin": "^5.0.1",
30 |     "postcss-flexbugs-fixes": "^4.1.0",
31 |     "postcss-loader": "^3.0.0",
32 |     "script-loader": "^0.7.2",
33 |     "style-loader": "^0.18.2",
34 |     "uglifyjs-webpack-plugin": "^2.0.1",
35 |     "url-loader": "^1.1.2",
36 |     "webpack": "^4.26.0",
37 |     "webpack-cleanup-plugin": "^0.5.1",
38 |     "webpack-cli": "^3.1.2",
39 |     "webpack-dev-server": "^3.1.10",
40 |     "webpack-merge": "^4.1.0"
41 |   },
42 |   "dependencies": {
43 |     "cssnano": "^4.1.7",
44 |     "exports-loader": "^0.7.0",
45 |     "postcss-aspect-ratio-mini": "0.0.2",
46 |     "postcss-cssnext": "^3.1.0",
47 |     "postcss-px-to-viewport": "0.0.3",
48 |     "postcss-viewport-units": "^0.1.6",
49 |     "postcss-write-svg": "^3.0.1",
50 |     "zepto": "^1.2.0"
51 |   },
52 |   "browserslist": [
53 |     "iOS >= 8",
54 |     "Firefox >= 20",
55 |     "Android > 4.0",
56 |     "last 5 versions"
57 |   ],
58 |  "author": "{{author}}"
59 | }
60 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by caofk on 2018/11/20.
3 |  */
4 | module.exports = {
5 | 	plugins: [
6 | 		require('autoprefixer')
7 | 	]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by caofk on 2018/11/29.
 3 |  */
 4 | body,html{
 5 | 	overflow-x: hidden;
 6 | }
 7 | .app {
 8 | 	width: 750px;
 9 | 	height: 200px;
10 | 	background: #f27a7a;
11 | 	color: #ffffff;
12 | 	line-height: 200px;
13 | 	text-align: center;
14 | 	font-size: 36px;
15 | }
16 | 
17 | .list {
18 | 	height: 80px;
19 | 	width: 720px;
20 | 	margin: 10px auto 10px auto;
21 | 	border: 1px solid #f27a7a;
22 | 	font-size: 24px;
23 | 	display: flex;
24 | 	justify-content: center;
25 | 	align-items: center;
26 | }
27 | 
28 | .row {
29 | 	margin: 40px 0;
30 | }
31 | 
32 | .cat {
33 | 	width: 650px;
34 | 	height: 400px;
35 | 	margin: 0 auto;
36 | 	display: block
37 | }
38 | 
39 | 
40 | @svg square {
41 | 	@rect {
42 | 		fill: var(--color, black); width: 100%; height: 100%;
43 | 	}
44 | }
45 | #example {
46 | 	background: white svg(square param(--color #00b1ff));
47 | 	height: 1px;
48 | 	width: 100%;
49 | 	margin: 40px 0;
50 | }
51 | 
52 | img {content: normal !important}
53 | 
54 | .box-row{
55 | 	margin: 0 auto;
56 | 	width: 750px;
57 | }
58 | .box{
59 | 	border: 1px solid #f27a7a;
60 | 	width: 400px;
61 | 	height: 400px;
62 | 	margin: 0 auto;
63 | }
64 | 
65 | .inner-box{
66 | 	width: 80px;
67 | 	height: 80px;
68 | 	border: 1px solid #f27a7a;
69 | 	padding: 100px;
70 | 	margin: 60px;
71 | }
72 | 


--------------------------------------------------------------------------------
/src/css/lib/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/images/18-CONTACTUS-HEADER.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/18-CONTACTUS-HEADER.jpg


--------------------------------------------------------------------------------
/src/images/Galaxy Note 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/Galaxy Note 3.png


--------------------------------------------------------------------------------
/src/images/Galaxy S5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/Galaxy S5.png


--------------------------------------------------------------------------------
/src/images/Nexus 7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/Nexus 7.png


--------------------------------------------------------------------------------
/src/images/iPad Pro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPad Pro.png


--------------------------------------------------------------------------------
/src/images/iPad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPad.png


--------------------------------------------------------------------------------
/src/images/iPhone 5_SE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPhone 5_SE.png


--------------------------------------------------------------------------------
/src/images/iPhone 6_7_8 Plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPhone 6_7_8 Plus.png


--------------------------------------------------------------------------------
/src/images/iPhone 6_7_8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPhone 6_7_8.png


--------------------------------------------------------------------------------
/src/images/iPhone X.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/iPhone X.png


--------------------------------------------------------------------------------
/src/images/华为P10 PLUS 1440_2560.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/华为P10 PLUS 1440_2560.png


--------------------------------------------------------------------------------
/src/images/华为P20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caoxiaoke/html-vw-layout/7df9a80d986a0947b2122c89300a2bceb0d7b3c5/src/images/华为P20.png


--------------------------------------------------------------------------------
/src/js/app.js:
--------------------------------------------------------------------------------
 1 | const app = {
 2 |     sayHello: () => {
 3 |         let text = document.createElement('span');
 4 |         text.textContent = 'Hello!';
 5 |         document.querySelector('body').appendChild(text);
 6 |         console.log(' hello !!!!');
 7 |     }
 8 | };
 9 | 
10 | 
11 | module.exports = app;


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | // import app from './app.js';
 2 | import '../css/lib/reset.css';
 3 | import '../css/index.css';
 4 | 
 5 | 
 6 | export default class Index  {
 7 | 	constructor(){
 8 | 
 9 | 	}
10 | 	getInfo(){
11 | 		// debugger;
12 | 		console.log('123');
13 | 	}
14 | }
15 | let index = new Index();
16 | index.getInfo();
17 | 


--------------------------------------------------------------------------------
/src/tpl/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>首页</title>
 8 |     <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
 9 | </head>
10 | <body>
11 | <div class="app">我做个测试啊aww～</div>
12 | <div class="row">
13 |     <div class="list">
14 |         我是测试1啊
15 |     </div>
16 |     <div class="list">
17 |         我是测试2啊
18 |     </div>
19 |     <div class="list">
20 |         我是测试3啊
21 |     </div>
22 |     <div class="list" >
23 |         我是测试4啊
24 |     </div>
25 | </div>
26 | 
27 | <div id="example">
28 | </div>
29 | 
30 | <div class="box-row">
31 |     <div class="box">
32 |         <div class="inner-box"></div>
33 |     </div>
34 | </div>
35 | <div class="row">
36 |     <img class="cat" src="../images/18-CONTACTUS-HEADER.jpg">
37 | </div>
38 | 
39 | 
40 | <script>
41 | 	window.onload = function () {
42 | 		window.viewportUnitsBuggyfill.init({
43 | 			hacks: window.viewportUnitsBuggyfillHacks
44 | 		});
45 | 	}
46 | </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------