bootstrap的实际应用

2023-06-11 23:22•linux•阅读 3606

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

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

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

<button type="button" class="btn btn-default" >微信登录</button>  里修改  也就是 内联
才会起作用  如果你自己本身用的外联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 都不能使用结果可自行测试.....