移动web开发
文章平均质量分 94
李穩钰
这个作者很懒,什么都没留下…
展开
-
移动web开发—— 响应式布局Bootstrap
BootstrapBootstrap简介Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。中文网:http://www.bootcss.com/官网:http://getbootstrap.com/推荐网站:http://bootstrap.css88.com/Bootstrap:是用于开发响应式布局,移动设备优先的web项目。框架:顾名思义就是一套架构,原创 2021-08-03 00:16:40 · 715 阅读 · 0 评论 -
移动web开发—— 响应式布局
响应式开发原理响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式开发可以实现,一套界面在不同终端进行正常显示。移动端设备的屏幕分辨率太多,响应式将这些进行了归类:设备划分尺寸区间超小屏幕(手机)< 768px小屏设备(平板)>= 768px ~ < 992px中等屏幕(桌面显示器)>= 992px ~ <1200px宽屏设备(大桌面显示器)>= 1200px原创 2021-08-02 18:42:40 · 95 阅读 · 0 评论 -
移动web开发—— rem布局
rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。em案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-08-02 17:25:37 · 222 阅读 · 0 评论 -
移动web开发—— flex布局
传统布局和flex布局对比传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex初体验示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2021-08-02 11:39:41 · 367 阅读 · 0 评论 -
移动web开发—— 流式布局
视口视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。布局视口 layout viewport视觉视口 visual viewport理想视口 ideal viewport 将布局视口的宽度修改为视觉视口,就是理想视口。布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都原创 2021-08-02 10:11:48 · 276 阅读 · 0 评论