搞定设计图了？想要还原布局可不容易哦得有本事和耐心！那今天我们就来聊聊这事儿，也许对大家有所帮助哟~
一、非精确的响应式设计
想快点搞好响应式设计？用媒体查询呗，超实用~简单地在页面上弄几个断点，看着屏幕大小换换样式，就能轻而易举搞定响应式效果！
缺点就是要用到断点，屏幕上的效果可能不尽如人意。而且如果设计图跟实际屏幕差距大的话，用媒体查询调节布局也是个挺头大的事情。
二、基于viewport的缩放方案
想让网页展示得跟设计图纸一样美吗？试试缩放工具！最简单的办法就靠viewport（设备视口）和rem（相对单位）这两个小伙伴了。手机上直接用viewport搞定就好。实际就是把网页显示的大小和设计图一致，然后计算出viewport的数值就可以咯。
别担心，这个办法就是调整ViewPort，使网页适应各种屏幕；但电脑上可做不到，还是乖乖设定固定尺寸。
(function () {
var docEl = document.documentElement;
var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent);
function setScale() {
var pageScale = 1;
if (window.top !== window) {
return pageScale;
}
var width = docEl.clientWidth || 360;
var height = docEl.clientHeight || 640;
if (width / height >= 360 / 640) {
// 高度优先
pageScale = height / 640;
} else {
pageScale = width / 360;
}
var content = 'width=' + 360 + ', initial-scale=' + pageScale
+ ', maximum-scale=' + pageScale + ', user-scalable=no';
document.getElementById('viewport').setAttribute('content', content);
window.pageScale = pageScale;
}
if (isMobile) {
setScale();
} else {
docEl.className += ' pc';
}
})()
三、基于rem的布局适配方案
REM布局近来火得很，不少大型公司都在用！这是个根据设计稿与设备宽度的关系，能自动调节网页文字尺寸的神奇东西。比如说，我们只需要将设计图中的各种元素的宽、高、位置等等数据，按照比例换算成REM单位，然后在CSS里面输进去就行了。
咱能用HTML的font-size调整网页字大小跟屏尺寸走。无论什么手机上都能看起来跟设计一样！至于元素大小时高矮啊位置，设成rem就好，所以无论是啥屏，网页美感还在哦～
四、html标签的font-size动态计算
嘿哥们儿，改变HTML字体大小呢其实就是看你怎么搞这比例了。比如说，你可以把网页分成10块来看。就像这样子：
咱们来搞定一个元素大小换算公式，顺便把HTML根标签的字号也跟着屏幕宽窄变，这样不管啥屏幕大小，网页看起来都是美美的！
五、元素大小的取值
(function(WIN) {
var setFontSize = WIN.setFontSize = function (_width) {
var docEl = document.documentElement;
// 获取当前窗口的宽度
var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;
// 大于 1080px 按 1080
if (width > 1080) {
width = 1080;
}
var rem = width / 10;
console.log(rem);
docEl.style.fontSize = rem + 'px';
// 部分机型上的误差、兼容性处理
var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + 'px';
}
}
var timer;
//函数节流
function dbcRefresh() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 100);
}
//窗口更新动态改变 font-size
WIN.addEventListener('resize', dbcRefresh, false);
//页面显示时计算一次
WIN.addEventListener('pageshow', function(e) {
if (e.persisted) {
dbcRefresh()
}
}, false);
setFontSize();
})(window)
你可以想象一下，这张分辨率为1080像素的大图被分成了10块，每块都是108像素。比如我们要把这个460×210的小图放上去，放在321像素下面，再移到70像素左边去，CSS代码该怎么设置？
简单说，就是得先搞清楚比例，然后就能准确地得出每个部分的大小和位置了。
function adjustWarp(warpId = '#warp') {
// if (window.isMobile) return;
const $win = $(window);
const height = $win.height();
let width = $win.width();
// 考虑导航栏情况
if (width / height < 360 / 600) {
return;
}
width = Math.ceil(height * 360 / 640);
$(warpId).css({
height,
width,
postion: 'relative',
top: 0,
left: 'auto',
margin: '0 auto'
});
// 重新计算 rem
window.setFontSize(width);
}
六、全屏显示的H5活动页调整
做H5全屏页面，别忘了注意下宽高比例，这样无论在哪种设备上都不会变形喔！
其实，我们的做法就是弄个换算比例，再看看要把H5全屏游戏弄成多大才能刚好符合当前情况！
七、字体使用的问题
const px2rem = function(px, rem = 108) {
let remVal = parseFloat(px) / rem;
if (typeof px === "string" && px.match(/px$/)) {
remVal += 'rem';
}
return remVal;
}
REMT缩放有点别扭的话，你就在媒体查询里调下字体尺寸！
这种方案的核心在于通过约定换算比例，动态计算字体的大小。
八、rem布局方案的开发方式
搞定REM布局其实不难，用LESS或者SASS预处理工具搞定，然后选择合适的混搭样式（也就是指定固定组合方式），最后依照设计图的尺寸设置大小就能达到想要的效果了。
.img_demo {
position: absolute;
background-size: cover;
background-image: url('demo.png');
top: 2.97222rem;
left: 0.64814rem;
width: 4.25926rem;
height: 1.94444rem;
}
九、针对前文的示例元素的css样式
你看着设计图上面的元素大小就知道宽高。记得PS里面随便画个参考线就能得到top/left的数值了
十、总结与展望
搞定设计图还原，其实不难，只是要费功夫。放心，只要努力学习肯定没问题。希望这条注意事项对你有所帮助有啥疑问或建议尽管提，就在留言区。会尽快回复的哟～
// px 转 rem
.px2rem(@px, @attr: 'width', @rem: 108rem) {
@{attr}: (@px / @rem);
}
.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) {
.px2rem(@top, top, @rem);
.px2rem(@left, left, @rem);
.px2rem(@width, width, @rem);
.px2rem(@height, height, @rem);
}
亲爱滴朋友们，快来，跟大家分享下你们是咋还原布局的！为啥超爱这招？快到评论区坐坐，互相切磋进步呗！
评论0