成都web培训机构分享移动端web自适应适配布局解决方案

成都达内科技

　　成都web培训机构分享移动端web自适应适配布局解决方案

　　100%还原设计图，要注意：

　　看布局，分析结构。

　　感觉难点在于：

　　1.测量精度(ps测量数据);

　　2.文字的行高。

　　前段时间写个移动端适配的页面(刚接触这方面)，查了一些资料，用以下方法能实现：

　　1.设置理想视口：

　　自动适应屏幕宽度 ：网页的宽度默认等于屏幕的宽度

　　2.动态设置fontSize：

　　function resize() {

　　let width = window.screen.width;

　　const basicvalue = 1024; //设计稿上的分辨率大小

　　//放大100倍，为了方便计算rem大小

　　document.documentElement.style.fontSize = (width / basicvalue) * 100 + 'px';

　　}

　　//加上以下代码是为了切换设备时能时刻刷新动态fontSize，从而得到正确的布局

　　window.addEventListener('resize', function () {

　　resize();

　　});

　　window.addEventListener('DOMContentLoaded', function () {

　　resize();

　　});

　　3.还需要css样式中用@media设置fontSize：

　　需要额外的媒介查询

　　html{

　　font-size: 100px;

　　}

　　@media only screen and (min-device-width:320px) and (max-device-height:568px){

　　html{

　　font-size: 42.6667px;

　　}

　　}

　　@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){

　　html{

　　font-size: 50px;

　　}

　　}

　　@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){

　　html{

　　font-size: 55.2px;

　　}

　　}

　　之后布局的宽高及边距等都可以用rem来布局了，即100px = 1rem;

　　若有什么问题，可以指出来，指导指导我，互相学习哈哈哈!