集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

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

发布者: 成都达内     浏览次数:     发布时间:2019-02-20 10:46:51

成都web培训机构分享移动端web自适应适配布局解决方案,100%还原设计图,要注意:看布局,分析结构。...

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

  100%还原设计图,要注意:

  看布局,分析结构。

  感觉难点在于:

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

  2.文字的行高。

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

  1.设置理想视口:

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

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

  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;

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

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

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56