找到最大尺寸 720px
考虑问题 屏幕缩小是=时尺寸的问题:让HTML的font-size是一个动态值
(function (window, document) {
var viewWidth = 750;
var pick = viewWidth / 100;
var mode = "resize";
function change() {
var view = document.documentElement.clientWidth || window.innerWidth;
// 如果视图窗口 宽度大于 720px
if (view >= 750) {
//那么设置 html 的font size 为100px
document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
return;
}
document.getElementsByTagName("html")[0].style.fontSize =
view / pick + "px";
}
window.addEventListener(mode, change, !1);
window.document.addEventListener("DOMContentLoaded", change, !1);
})(window, document);
一套代码一个布局适用所有移动端
1.设计时,以最大像素为基础 768px,那么所有低于768的屏幕都适配
2.整体布局默认不设置宽度:默认100%
3:父元素一半不设置高度,有子元素撑起来
4.图片设置100%宽度
5.布局用flex 不用 width:100% float
6.文字大小用rem
在使用rem方案的时候,设计师设计尽量最大的页面效果图,例如720像素的基本可以适应所有的移动端的设备
整体布局默认是不设置宽度的,就直接让它100%,铺满整个屏幕就OK了
小布局都是rem为单位的,大于720像素的时候,没有变化,但是一旦小于720像素的时候,等比例的缩放,这点跟移动端不考虑放大,考虑缩小的原则是一致的
图片只设置width:100%,其余不用设置,自适应盒子的大小
文字依然以rem为单位,等比例的放大,缩小
所有的布局均使用flex布局来用,不再使用width百分比,float布局了