BootStarp(媒体查询☆☆☆☆☆)(day01)

本文介绍了BootStrap的响应式布局原理,包括媒体查询技术、响应式网页设计要点,以及如何测试响应式布局。同时,讨论了CSS优化的重要性,如减少HTTP请求、合并样式和代码压缩等,并提到了CSS Reset与Normalize.css的区别。此外,详细讲解了BootStrap中常用的样式类,如按钮、图片、文字和表格的样式应用。
摘要由CSDN通过智能技术生成

七、css优化
优化目的
1.减少用户端压力
2.提升用户体验

1.css优化的原则
尽量减少http的请求个数(缓存,精灵图)
在页面的顶部引入js和css文件
将css和js文件放到单独文件中

2.css代码的优化
合并样式(能写群组,能用简写)
缩小样式文件(能重用就重用)
避免出现空的href和src=""
代码压缩

八、css reset(css样式清零) 和 normalize.css
不同浏览器默认样式不同,为了一份代码在各个浏览器样式统一
我们把不同浏览器的默认样式统一的修改或者清零
1.css reset 十分暴力把很多元素特有样式都清零
导致这些元素失去了原本的意义

2.Normalize.css
保留了很多元素的语义特征,优化了不同浏览器的很多bug
css reset的替代方案

BootStrap
一、响应式的布局(是css3 2010年提出)
1.声明是响应式布局
Responsive web page 响应式/自适应网页
可以根据浏览器设备不同,而自动改变页面的布局,图片,文字效果
不影响用户体验

2响应式网页必须做的几件事
1.布局的时候不能有固定的元素宽度,必须是流式布局(默认文档流+float)
2.文字和图片大小随着容器大小变化(相对单位% rem)
3.媒体查询技术(css3提供的技术)

3.如何测试响应式网页
①使用真实设备
测试效果真实可靠

②使用第三方模拟软件
不要太多真实设备,测试比较方便
测试效果有限

③使用chrome自带的模拟软件
简单方便
测试效果十分有限<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值