HTML5技术

《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应 - 更爱Web-APP

字号+ 作者:H5之家 来源:H5之家 2017-09-30 11:00 我要评论( )

1.整体缩放 整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大

1.整体缩放

整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小。开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算实际文档宽度来进行相应缩放。

使用整体缩放布局开发的项目在加载过程中需要监听resize事件,代码如下:

window.addEventListener(‘resize’,document.body.clientWidth / 320);

除此之外,开发者需要在缩放的节点上添加transform-origin属性保证缩放是从原点开始,如果非原点缩放会导致页面不能完全显示,CSS代码如下:

 

.wrap { width: 320px; transform-origin: 0 0 }

2.媒体查询

另一种方法是使用背景色整体填充,主体使用不同的媒体查询进行大小优化,开发者需要对主流的屏幕分辨率进行设定,本实例因为要处理图标到背景图的精确定位,所以并不适合使用媒体查询,媒体查询更加适合一些展示型页面,本实例仅对外层做修改,假设拥有一个绿色背景,代码如下:

 

媒体查询会使代码量大幅增加,在实际开发中,开发者需要注意两点,一是将不需要根据屏幕变化的属性放到媒体查询外设置,减少代码冗余,二是设置好需要的媒体查询断点。

 

.wrap { background-color: green; } /* 设定外层背景色 */ .main-bg { background: url(../images/main.jpg) no-repeat; /* 背景图片 */ background-size: 100%; /* 背景图片撑满容器 */ } @media (max-width: 320px) { /* 适配320px宽度以下屏幕 */ . main-bg { width: 320px; height: 470px; } } @media (min-width: 321px) and (max-width: 639px) { /* 适配320px到640px宽度屏幕 */ . main-bg { width: 480px; /* 采用480px适配改区间 */ height: 705px; /* 调整高度放置图片拉伸 */ } } @media (min-width: 640px) { /* 适配640px以上宽度屏幕 */ . main-bg { width: 640px; height: 940px; } }

  

 

更多信息关注:

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用 - 更爱Web-AP

    《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6

    2017-09-30 08:00

  • 【前端笔记】 CSS 基础 - 专注精彩

    【前端笔记】 CSS 基础 - 专注精彩

    2017-09-04 14:01

  • 【canvas学习笔记七】混合和裁剪 - 池月

    【canvas学习笔记七】混合和裁剪 - 池月

    2017-08-29 13:00

  • 【canvas学习笔记六】状态保存和变换 - 池月

    【canvas学习笔记六】状态保存和变换 - 池月

    2017-08-29 12:00

网友点评
s