移动Web布局
萌新菜鸟前端
这个作者很懒,什么都没留下…
展开
-
移动web开发
移动端基础 移动端浏览器现状 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。主要都是以Webkit内核修改开发而来。所以处理Webkit内核浏览器即可。 手机屏幕的现状 移动端设备屏幕尺寸非常多,碎片化严重。 Android设备有多种分辨率:480x800, 480x854, 540x960, ...原创 2019-10-30 14:55:10 · 100 阅读 · 0 评论 -
移动端常见布局之流式布局
移动端常见布局 移动端单独制作 流式布局(百分比布局) flex 弹性布局(强烈推荐) less+rem+媒体查询布局 混合布局 响应式 媒体查询 bootstarp 流式布局: 流式布局,就是百分比布局,也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。 <style> * { ...原创 2019-10-30 15:00:48 · 1023 阅读 · 0 评论 -
移动端常见布局之flex布局
flex布局 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 flex布局原理 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 verti...原创 2019-10-30 15:20:12 · 710 阅读 · 0 评论 -
移动web开发之rem布局和less的相关
rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询(Media Query)是CSS3新语法。 使用 @media查询,可以针对不同的媒体类型定义不同...原创 2019-11-04 16:13:36 · 354 阅读 · 0 评论 -
移动端WEB开发之响应式布局和bootstrap的介绍
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。 bootstrap的介绍 Bootstrap框架:顾名思义就...原创 2019-11-05 20:02:27 · 545 阅读 · 0 评论