2016.9.25 Miscellaneous notes on learning details

正常情况下 使用bootstrap 比原生代码 写响应式布局更快

补充上一文《bootstrap的实际应用》：

bootstrap的lang ： 之前班上很多同学忘了改这个 原生的lang为 <br>由于bootstrap本质是已经写好了固定的css的样式 所以要修改从bootstrap复制过来的内容时 请在 例如：

<button type="button" class="btn btn-default" style="height: 1.875rem;border: none;">微信登录</button>  里修改  也就是 内联<br>才会起作用  如果你自己本身用的外联link XXXX 的css样式想去修改bootstrap复制过来的某个东西时 起不了作用

web端 必做兼容性 适应各种浏览器 可能有几套图 经常使用雪碧图

app端 有不同的屏幕尺寸 且必须进行自适应{ @media srceen 或者 bootstrap 或者 JS } 也经常使用雪碧图

* 雪碧图 可以提高网页加载速度 多图整合为一张

* 做自适应 宽必须为百分比 高度尽量也用百分比 不可避免的情况下 用rem margin、 padding 最好用百分比 其次 rem

* 移动端必须加 meta viewport

                                                                                                                                     不允许用户缩放 

手机各个屏幕尺寸下的fontsize 大小换算

@media screen and (min-width: 1242px){html{font-size: 38.8125px;}}
@media screen and (min-width: 960px){html{font-size: 30px;}}
@media screen and (max-width: 750px){html{font-size: 23.4375px;}}
@media screen and (max-width: 640px){html{font-size:20px;}}
@media screen and (max-width: 414px){html{font-size:12.9375px;}}
@media screen and (max-width: 360px){html{font-size:11.25px;}}
@media screen and (max-width: 320px){html{font-size:10px;}}

使用图片时 用div包裹img 不能直接甩img裸在body

优雅降级
一开始在兼容性好的浏览器做网页 在慢慢做 兼容性差的浏览器的适应

 

逐渐增强
一开始做好所有 浏览器 屏幕的适应 不过只做了基本功能 后来再慢慢填充内容

 

bootstrap中container 定宽度100%

如果 导航 和 尾部 应用了position fixed 属性 那么 中间内容部分   排版定位时  不要使用 定位 用margin或者padding去撑距离  否则 用定位的那个元素 会呈现在 做过fixed的导航上方 遮挡住导航    absolute 和 relative 都不能使用 结果可自行测试.....