推广优化网站排名,平台推广员,智能网站推广优化,学做网站网前端开发中#xff0c;移动端的开发可以说是举足轻重了#xff0c;可是又面临着不同设备尺寸和分辨率的尴尬点。今天[2018-09-16]台风山竹登陆广东#xff0c;来势汹汹#xff0c;外出是不可能的了#xff0c;那就宅着写写这篇小文章吧...原文请戳这里-谈谈rem单位 超长的… 前端开发中移动端的开发可以说是举足轻重了可是又面临着不同设备尺寸和分辨率的尴尬点。今天[2018-09-16]台风山竹登陆广东来势汹汹外出是不可能的了那就宅着写写这篇小文章吧...原文请戳这里-谈谈rem单位 超长的前奏 说到移动端的响应布局你也许会想到 1. 使用CSS3媒体查询的方法 body {background: yellow;
}
media screen and (max-width: 400px) {body {background: red;}
}
复制代码 嗯这种的样式的工作量超级大因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过 2. 直接使用百分比 这种方法比较适合移动端上页面图片铺满宽度屏幕的运营推广活动的情况。因为在设计的时候会有一个750px的宽等等设计规范能够很好的适配到不同手机啦。然后工作就是切图了... #percent{width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;
}
#percent .item{flex: 1;
}
#percent .item img{display: block;width: 100%;height: auto;
}
复制代码 这种切图比较费力如果认真看上面的gif图的话会发现是三张同等宽高的图片在chrome上的调试器上看是有白条的不过不影响。因为在真机上是不存在的。如果不是切图宽度等分的情况下那就不建议这种百分比的适配方法了。 3. 固定宽度 这种方法比较适合PC端开发在移动端是必须不能才去的。因为移动端的宽度足够能够带来足够好的体验并且最重要的一点是其像素比是1啊。在缩放的时候不会带来内容变形的体验。如果到移动端上面那就呵呵了 #container{width: 680px;background: yellow;margin: 0 auto;
}
h1{text-align: center;
}
复制代码 4. 使用viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域再具体一点就是浏览器上用来显示网页的那部分区域但viewport又不局限于浏览器可视区域的大小它可能比浏览器的可视区域大也可能比浏览器的可视区域小。 这得要在网页的head标签上面设置meta比如 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0
复制代码嗯这个知识点还是一丢丢的详细的内容参考菜鸟教程响应式 Web 设计 - Viewport。 本博文的重点不是这个 是的我们可以使用REM来进行适配啊可以说是目前最强的移动端适配方案... rem是什么 rem和em单位一样都是一个相对单位不同的是em是相对于父元素的font-size进行计算rem是相对于根元素html的font-size进行计算的这样一来rem就完美的绕开了复杂的层级关系实现了类似em单位的功能。默认情况下浏览器给的字体大小是16px按照转化关系16px 1rem。 咦都是固定了根元素是默认16px了如何设备不同的移动设备呢 问题提出也是答案所在我们动态改变根元素html的字体默认大小不就行了嘛见下 rem自适应处理方案 使用rem布局的时候为了兼容不同的分辨率我们应该要动态的修正根字体的大小让所有的用rem单位的子元素跟着一起缩放从而达到自适应的效果。 嗯下面就是动态改变根字体的大小了采取的当然是javascript来进行控制啦不然怎么知道像素比哦。 一种是获取像素比【像素比物理像素/逻辑像素】通过devicePixelRatio其兼容性在ie上要在11及11兼容性良好。罢了不讨论IE浏览器了看者慎用IE... (function(){var devicePixelRatio window.devicePixelRatio || 1;
})();
复制代码嗯在移动端上面适配rem和viewport搭配效果更佳哦完整代码片段如下 headmeta nameviewport /
/head
复制代码(function(){var fontSizeMatchDeviceWidth function(){var deviceWidth document.documentElement.clientWidth || window.screen.width || 320,devicePixelRatio window.devicePixelRatio || 1,fontSize (Math.ceil(deviceWidth * 16 / 320)),scale 1 / devicePixelRatio; // 默认的缩放document.documentElement.style.fontSize fontSize px;document.querySelector(meta[nameviewport]).setAttribute(content,widthdevice-width,initial-scalescale,maximum-scalescale,minimum-scalescale,user-scalableno,viewport-fitcover); // 增加viewport-fitcover适配iphone x};(function(){var ua navigator.userAgent;if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){fontSizeMatchDeviceWidth();} else { // pc端优雅降级document.documentElement.style.fontSize 24px;}})();
})();
复制代码在上面的基础上添加点点样式完整的一个demo走一下 #container{background: yellow;margin: 0 auto;
}
h1{text-align: center;
}
复制代码 如有纰漏欢迎看到的各位小哥哥小姐姐指正 更多内容请前往我的github
