移动端布局
Harryyyyyyy
Hi.
展开
-
移动端web开发之四娃——响应式布局
移动端WEB开发之响应式布局 1、 响应式开发原理 1.1 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素...原创 2020-04-23 20:14:39 · 164 阅读 · 0 评论 -
移动web开发之二娃——rem布局
移动web开发之rem布局 rem基础 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12p...原创 2020-04-23 20:07:59 · 156 阅读 · 0 评论 -
移动web开发之大娃——flex布局
移动web开发flex布局1、flex布局特点2、 flex布局原理3、父项常见属性3.1 flex-direction设置主轴的方向3.2 justify-content 设置主轴上的子元素排列方式3.3 flex-wrap设置是否换行3.4 align-items 设置侧轴上的子元素排列方式(单行 )3.5 align-content 设置侧轴上的子元素的排列方式(多行)3.6 align-...转载 2020-04-23 19:51:11 · 123 阅读 · 0 评论 -
移动web开发之三娃——流式布局
1、常见的移动端屏幕尺寸 2、移动端调试方法 Chrome DevTools(谷歌浏览器)的模拟手机调试 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 3、视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 3.1布局视口 layout viewport 一般移动设备的浏览器...原创 2020-04-23 19:36:28 · 119 阅读 · 0 评论