Mobile end layout
以移动端布局为主,包含响应式布局。
Jdoit CW
一个要做全栈的前端小陈
Just move on---陈稳
展开
-
【Grid布局】让你5分钟拿下
内容 Grid 布局基本介绍 Grid 布局属性展示 1. Grid 布局 Grid 布局(网格布局)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。 此图使用其他布局做起来着实磨人,但这正是 Grid 布局的杰作 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。了解 Fle原创 2020-09-22 15:56:05 · 10417 阅读 · 1 评论 -
1:流式布局
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主...原创 2020-04-25 19:00:03 · 2364 阅读 · 0 评论 -
2:flex布局
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 f...原创 2020-04-25 18:50:35 · 2327 阅读 · 0 评论 -
3:rem适配布局
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px;...原创 2020-04-26 19:57:01 · 2554 阅读 · 0 评论 -
4:响应式布局
1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 响应式原理: <style> .box { ...原创 2020-05-05 11:02:44 · 2789 阅读 · 2 评论 -
5:移动端布局总结
总结 单独制作移动端页面(主流) 京东商城移动端 淘宝移动端 苏宁易购移动端 ······ 响应式页面兼容移动端(其次) 三星手机官网 ······ 移动端技术选型 流式布局(百分比布局) flex弹性布局(推荐) rem适配布局(推荐) 响应式布局 建议:我们选取一种主要技术选型,其他技术作为辅助,这种混合技术开发,更高效。 ...原创 2020-05-05 11:12:32 · 2850 阅读 · 0 评论