Loading...
1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通...
rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，...
一、移动端调试方法Chrome DeVtools的模拟手机调试搭建本地WEB服务器买手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问二、视口视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口1.布局视口 layout viewport一般移动设备的浏览器都设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问...