Home >Web Front-end >HTML Tutorial >2016.9.25 Miscellaneous notes on learning details
2016.9.25 Miscellaneous notes on learning details
- WBOYOriginal
- 2016-09-26 08:27:17957browse
正常情况下 使用bootstrap 比原生代码 写响应式布局更快
补充上一文《bootstrap的实际应用》：
bootstrap的lang ：<html lang="zh-CN"> 之前班上很多同学忘了改这个 原生的lang为 <html lang="en"><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 都不能使用 结果可自行测试.....