bootstrap(01)

一 响应式布局

1 前言

(1)响应式网页
可以根据浏览设备(硬件,尺寸,横竖屏)不同,而自动改变布局,图片,文本的效果,不影响用户体验
根据不同的浏览设备,执行一部分css代码,忽略其他css代码
(2)完成响应式网页,必须做到下面几件事情
①布局,不能固定元素的宽度,建议使用流式布局(默认文档流+浮动)
②文字和图片大小随着容器大小改变,rem/em/%
③媒体查询技术(css3的技术)

(3)响应式网页的问题:
写响应式,代码复杂程度几何性增加,复杂的网页不建议使用响应式

(4)如何测试响应式网页
①使用真实设备测试:真实可靠,测试任务量巨大
②第三方测试软件
好处,不需要 太多真实设备,测试方便;
坏处,有些功能无法测试,有待进一步验证
③使用Chrome自带的模拟软件
简单方便,测试效果极其有限

2 编写响应式网页

(1) 移动端适配
<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”>
width=device-width,视口宽度为设备宽度
initial-scale=1.0,初始时视口不缩放
maximum-scale=1.0,最大缩放比例 1.0
user-scalable=0不让用户手动缩放
最简方式:

所有的内容/文字/图片/使用相对的尺寸,不建议使用绝对值
推荐使用流式布局+弹性+媒体查询技术完成响应式

④媒体查询技术(CSS3技术) Media Query作响应式的必备技术
Media—设备(硬件,尺寸,方向,解析度等)
—硬件:pc/pad/phone/+tv/print
—尺寸:
a超大屏(v>=1200px) xl;
b大屏(992px<=v<=1199px) lg;
c中屏(768px<=v<=991px) md
d小屏(576px<=v<=767px) sm
e超小屏(v<575px) xs
Media Query 自动根据当前浏览设备不同,有选择性的执行一部分css代码,忽略一部分css代码

二 bootstrap

1 起步,如何使用boot

①视口的配置,
②引入bootstrap.css
③按顺序引入三个js文件jQuery—Popper—bootstrap

2 全局css样式

boot的响应式不支持超小屏;boot中1rem=16px
(1)容器
container:定宽容器,在不同屏幕下宽度固定
container-fluid:变宽容器

boot中的响应式, 向上兼容.

发布了90 篇原创文章 · 获赞 0 · 访问量 575
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 我行我“速” 设计师: Amelia_0503

分享到微信朋友圈

×

扫一扫,手机浏览