响应式网页开发：媒体查询与Bootstrap实战.pptxVIP

移动Web第七天成长必经之路

响应式

响应式网页

媒体查询BootStrap实战演练

媒体查询01

基本语法目标：能够根据设备宽度的变化，设置差异化样式开发常用写法媒体特性常用写法max-widthmin-width

书写顺序目标：能够根据设备宽度的变化，设置差异化样式min-width（从小到大）max-width（从大到小）需求默认网页背景色是灰色屏幕宽度在768-992之间,网页背景色是粉色屏幕宽度在992-1200之间,网页背景色是skyblue屏幕宽度大于1200,网页背景色是绿色7689921200设备划分尺寸区间超小屏幕（手机）768px小屏设备（平板）=768px~992px中等屏幕（桌面显示器）=992px~1200px宽屏设备（大桌面显示器）=1200px

书写顺序目标：能够根据设备宽度的变化，设置差异化样式应用场景：修改游乐园，设定最大宽度为540px

书写顺序目标：能够根据设备宽度的变化，设置差异化样式应用场景：显示隐藏元素

基本语法目标：能够根据设备宽度的变化，设置差异化样式完整写法

关键词目标：能够根据设备宽度的变化，设置差异化样式andonlynot

媒体类型目标：能够根据设备宽度的变化，设置差异化样式媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。类型名称值描述屏幕screen