摘要：
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： + 小于768的为超小屏幕（手机） + 768~992之间的为小屏设备（平板） + 992~1200的中等屏幕（桌面显示器 阅读全文
摘要：
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 rem的优势：父元 阅读全文
摘要：
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 + 兼容性好 + 布局繁琐 + 局限性，不能再移动端很好的布局 1.2 flex布局 + 操作方便，布局极其简单，移动端使用比较广泛 + pc端浏览器支持情况比较差 + IE11或更低版本不支持flex或仅支持部分 1 阅读全文
摘要：
移动web开发流式布局 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览 阅读全文
摘要：
基础案例 01 轮播图进度条 训练描述 完成鼠标经过即可 训练提示 1. 添加背景图片，设置初始化样式 2. 利用盒子，定位盒子的位置，设置li的宽和高 3. 设置span的小高度，设置span的伪元素跟span一样大小，并且左下角对齐，宽度默认为0 4. 当鼠标经过则给伪元素宽度 操作步骤 1. 阅读全文