摘要：一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大 阅读全文

摘要：一、rem基础 rem（root em）是一个相对单位，类似em，em是相对于父元素的字体大小 不同的是rem的基准是相对于HTML元素的字体大小 rem的优势:父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元 素大小 二、媒体查询 2.1 什么是媒体查询 媒体查 阅读全文

摘要：一、移动端基础 二、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口（layout viewport） 2.2 视觉视口（visual viewport） 2.3 理想视口（ideal viewport） 2.4 总结 2.5 阅读全文

摘要：一、flex布局体验 二、flex布局原理 display:flex; 父级设置了flex布局后，子元素就算是行内元素很多浏览器可以把它当做inline-block或者block元素来用，可以直接设置它的宽高， 三、flex布局父项常见属性 3.1 常见父项属性 3.2 flex-direction 阅读全文