响应式布局
文章平均质量分 51
总结分享一些自己在学习响应式布局内容时,觉得比较重要的点;以及给入门响应式布局的小伙伴们一个系统的知识清单。
薯条♪
走向乌兰巴托
展开
-
移动端开发(rem+flexbox项目实例总结)
移动端招聘项目首页总结一.项目效果、项目要求及工具使用二.项目文件 一.项目效果、项目要求及工具使用 项目效果:(第一板块导航) 项目效果:(第二板块动态轮播) 项目效果:(第三板块左右轮播) 项目效果:(第四板块页脚) 项目要求:页面适配ipad(786 ✖ 1024)像素以下所有设备,所有的图片文件像素大小均要符合UI设计师原图大小。 工具使用(摹客):摹客官网一款能够测量原型图大小以及各元素颜色、像素的在线团队合作软件,开发者和UI设计师可以实时交互,探讨。 二.项目文件 ...原创 2021-11-08 08:20:32 · 116 阅读 · 0 评论 -
响应式布局---基础知识
响应式布局---基础入门一. 媒体查询(@media) 一. 媒体查询(@media) 媒体查询的含义:根据不同设备屏幕大小来决定页面的样式(不限于布局、样式) 需求:有一个div,要求在同一个页面根据不同的屏幕大小,来展示不同的样式效果。 基本结构: <body> <!-- 概念:为不同屏幕尺寸设定不同的css的样式 --> <div id="dv"></div> </body> style样式: <style>原创 2021-10-23 20:38:17 · 205 阅读 · 0 评论 -
响应式布局---深入概念
响应式布局一. 情景模拟,提出需求二. 开发探讨,技术筛选 一. 情景模拟,提出需求 概念 项目经理说:“客户需要开发一套PC端和移动端的电商网站,任务已经分到你们手中了;小肖同学,你来带领大家完成开发哈”。 思考 假如是你,你会怎么办? 方案 分为两个小组PC端一套页面,移动端一套页面 整个小组采用响应式布局设计,一套页面能够同时满足PC端和移动端的显示。(响应式布局概念) 二. 开发探讨,技术筛选 ????经过大家一致讨论,最终选择了采用方案2,使用响应式布局方式开发 可行型响应式布局方案 采用百原创 2021-10-18 17:27:25 · 86 阅读 · 0 评论