1. 做横向列表时,如何适应屏幕大小
1.1 如以下例子,都是横向布局的
注:如果我们给每个 li 指定固定宽度的话,当在不同的设备上显示时,显示的效果就会不同,那么如何解决这个问题呢?
1.2 如何解决上面描述的问题
- 第一 基于 375px 的屏幕 进行开发
- 第二 使用 百分比布局 ,比如
一行四个元素,则每个元素的宽就是 25%
,如果每个元素之间需要间隔,可以缩小每个元素所占宽度,然后加上间隔即可。 - 第三 使用 浮动 使 li 元素横向排列
ul.category-group li.category-item{
width: 20%; /* 每个li 的宽度设为 20% */
margin: 0.9375rem 0 1rem ;
height: 5rem;
float: left; /* 让 li 元素横向排列 */
text-align: center;
}
2. 如何做移动端不同屏幕的适配
2.1 推荐使用 rem 布局
-
如何使用
-
根元素(html)设置 font-size:16px; —> 16px 仅供参考,具体情况具体分析;
-
基于 375px 的屏幕进行开发,在Chrome 浏览器下,按
F12
进入开发者模式之后,点击
蓝色这个图标,即可进入手机预览模式,选择 iphone6/7/8 即可。 -
接下来,在页面中,所有用到 px 的地方,全部转化为 rem ,如 12px 转为 rem ==> 12px / 16px = 0.75
即 12px = 0.75rem ,所以此时的 rem 即可看做,16px;
-
-
使用 rem 之后,如何适配
- 在页面的头部 插入 js 代码来进行适配,代码见下方
- 即根据当前 设备的屏幕大小,来调整 html ==> font-size的大小,进而,等比例改变页面中所有的地方。
// js 适配代码 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 16 * (clientWidth / 375) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window) </script>