一:移动WEB学习(看视频)
看视频学习移动WEB理论以及实操
库库好困
向各位大佬们致敬
展开
-
前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)
阿里百秀首页案例技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸1. 页面布局分析2. 屏幕划分分析① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就可以了, md 是大于等于 970 以上的② 屏幕缩放发现 小屏幕 布局发生变化,因此我们需要为 小屏幕根据需求改变布...原创 2020-04-19 23:12:08 · 3039 阅读 · 5 评论 -
前端移动Web第四天知识点:响应式布局(bootstrap框架)
1.响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。1.2 响应式布局容器1.响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。2.原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。平时我们的响应式尺寸划分超小屏...原创 2020-04-19 23:03:06 · 369 阅读 · 0 评论 -
前端移动Web第三天:苏宁首页-第二种简洁高效的rem适配方案flexible.js
简洁高效的rem适配方案flexible.js手机淘宝团队出的简洁高效 移动端适配库我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。我们要做的,就是确定好我们当前设备的html 文字大小就可以了比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以...原创 2020-04-19 00:22:04 · 670 阅读 · 0 评论 -
前端移动Web第三天:苏宁首页-第一种:less+媒体查询+rem适配方法
第一种:less+媒体查询+rem1. 技术选型方案:我们采取单独制作移动页面方案技术:布局采取rem适配布局(less + rem + 媒体查询)设计图: 本设计图采用 750px 设计尺寸2. 搭建相关文件夹结构3. 设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalabl...原创 2020-04-19 00:11:51 · 414 阅读 · 0 评论 -
前端移动Web第三天知识点:rem适配布局以及Less
rem基础:rem是一个相对单位,类似于em,em是父元素字体大小;而 rem 的基准 是 相对于html元素的 字体大小例:根元素(html)设置 font-size = 12px;非根元素设置 width:2rem;则换成px表示就是24px。优点:可以通过修改html里面的文字大小来改变页面元素的大小。媒体查询:是css3 新语法(media query),可以针对不同的屏...原创 2020-04-18 17:49:23 · 263 阅读 · 0 评论 -
前端移动Web第二天:Flex伸缩布局-携程首页案例
body { max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei", STXihei, hei; color: #000; background: #f2f2f...原创 2020-04-16 17:22:43 · 447 阅读 · 0 评论 -
前端移动Web第二天知识点:Flex伸缩布局
Flex弹性布局特点:1.操作方便,布局极为简单,移动端应用很广泛;2.PC端浏览器支持情况较差;3.IE11或更低的版本,不支持或仅部分支持。建议:1.如果是PC端页面布局,我们还是做传统布局(兼容性好,布局繁琐,局限性:不能在移动端很好的布局);2.如果是移动端或者不考虑兼容性问题的PC端页面布局,还是推荐使用 flex 弹性布局的。Flex布局原理:1.flex 意为“弹...原创 2020-04-16 01:04:43 · 245 阅读 · 0 评论 -
前端移动Web第一天:流式布局-京东首页案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=...原创 2020-04-08 20:51:39 · 468 阅读 · 0 评论 -
前端移动Web第一天知识点:流式布局
点击可查看移动端屏幕尺寸数据参考链接:注意:作为前端开发,不建议大家去纠结dp dpi pt ppi等单位。视口视口就是浏览器显示页面内容的屏幕区域,视口分为 布局视口、 视觉视口 、理想视口其中,视觉视口就是网站的区域,用户正在看到的区域。meta视口标签:<meta name="viewport" content="width=device-width, user-scal...原创 2020-04-08 20:40:26 · 269 阅读 · 0 评论