写一个简单的几个页面的心得

  因为一直在学javaScript，页面布局有点练的少了，最近再写几个页面，发现了很多问题，现在来总结一下。

   因为是移动端的项目，所有有一些和pc端的不一样，我以前采用的移动端的布局使用的是(http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html).淘宝的fiexible布局方案，使用rem作为尺寸，flex布局方式，但是这一次因为有人要求，就没有使用rem。就是只用的flex布局。所以出现了一些问题，幸好都解决的差不多，总结一下。

  首先是页面缩放问题， 所以在开头要引入这个标签，

<meta name="viewport"    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

为了页面一致要添加base.css
布局要自适应，一般外面的盒子不要定宽和定高，由里面的盒子撑开，然后合理运用flex布局就差不多了。

   这里因为我写了一个变形版的弹窗组件，因为通用性不强，只能用于我这个项目，就不开源了，期间发现一个问题，就是css的覆盖问题，意思是我的页面中的css影响了我的组件中的布局，导致我的页面出现了问题，这个问题很可恶，导致我要重新写组件中的css，把他优化好，我就想这个怎么解决，搜了有下面方案。

   采用webpack等打包工具，这样把css代码就可以分隔开来了，原理还是通过命名，编译之后你会发现页面中的css命名有点奇观，尾部会有一下奇怪的字符。

但是如果是第三方组件公用的比如body和html等，里面的css属性出现了冲突这个该怎么解决。没有搜到好的方案，自己也没想到该怎么解决，有人知道的话请指教。我的思路是组件尽量不要依赖这些公用的标签，防止因为在自己页面中主css和依赖的冲突。想想css如果是一种编程语言，比较java他是怎么做的，单一职责最好，做的修改只是在自己组件内部，而不要去动全局的。

   又有例外有时候组件如果依赖于html的font-size做rem，而自己的html的font-size又是另外一种怎么办，我暂时只能想到组件不要使用rem。不知道大家有别的想法没有。