《移动Web前端高效开发实战》笔记1——静态布局

作者:分分快三计划

 

《移动Web前端高效开荒实战》笔记1——静态布局在活动端上的自适应,

1.全部缩放

全部缩放可以用在营销活动页,经营贩卖活动只怕因为布署赏心悦目须要必需选拔背景图片而非背景象,因而须要酌量背景图适应显示器尺寸。开垦者能够用320像素的宽窄作为根底宽度(中度可以固定卡塔尔国,然后通过测算实际文书档案宽度来张开对应缩放。

选拔完全缩放布局开辟的品种在加载进度中须要监听resize事件,代码如下:

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

除开,开垦者需求在缩放的节点上加多transform-origin属性保障缩放是从原点开始,倘若非原点缩放会促成页面不可能一心呈现,CSS代码如下:

 

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

2.媒体询问

另生龙活虎种格局是采纳背景观全部填充,主体选用差异的媒体询问进行高低优化,开辟者必要对主流的显示器分辨率实行设定,本实例因为要拍卖Logo到背景图的准确定位,所以并不相符选用媒体询问,媒体询问尤其切合部分体现型页面,本实例仅对外围做改进,若是具备四个土色背景,代码如下:

 

媒体询问会使代码量大幅度增添,在事实上付出中,开拓者须求小心两点,一是将不须要遵照显示屏变化的质量放到媒体询问外安装,收缩代码冗余,二是安装好内需的传播媒介询问断点。

 

.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

 

1.总体缩放 全部缩放能够用在营销活动页,经营发售活动只怕因为设计...

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

更加多音信关切:

另大器晚成种方法是运用背景象全部填充,主体采取区别的传播媒介询问举行高低优化,开垦者须求对主流的荧屏分辨率举办设定,本实例因为要管理图标到背景图的准鲜明位,所以并不合乎利用媒体询问,媒体询问尤其符合部分展现型页面,本实例仅对外围做校勘,假使具备二个朱红背景,代码如下:

2.传播媒介询问

1.完完全全缩放

而外,开拓者须要在缩放的节点上增加transform-origin属性有限支撑缩放是从原点最初,如若非原点缩放会导致页面不可能一心突显,CSS代码如下:

《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应,分分快三计划。《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应,分分快三计划。 

应用完全缩放布局开荒的门类在加载进度中要求监听resize事件,代码如下:

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

 

传播媒介询问会使代码量小幅增添,在骨子里开支中,开垦者必要注意两点,一是将无需基于显示屏变化的习性放到媒体询问外安装,减弱代码冗余,二是设置好内需的传媒询问断点。

《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应,分分快三计划。 

 

  

.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;
 }
}

分分快三计划 2

总体缩放能够用在经营贩卖活动页,经营出卖活动恐怕因为设计美观须要必须使用背景图片而非背景象,因而必要思谋背景图适应显示器大小。开采者能够用320像素的升幅作为幼功宽度(中度能够固定卡塔尔,然后经过测算实际文书档案宽度来扩充对应缩放。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划