移动端开发之流式布局

派小星
175 阅读2分钟

1. 流式布局(百分比布局)

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 流式布局方式是移动web开发使用的比较常见的布局方式。

11.png

1.1 注意事项

  • 制作过程中，需要定义页面的最大和最小支持宽度。
  • max-width最大宽度(max-height最大高度)
  • min-width最小宽度(min-height 最小高度)

2. 京东移动端首页制作

掌握流式布局技巧

2.1 京东移动端首页

  • 访问地址: mjd.com

图片.png

2.2 技术选型

  • 方案:我们采取单独制作移动页面方案
  • 技术:布局采取流式布局

2.3 搭建相关文件夹结构

图片(1).png

2.4 设置视C标签以及引入初始化样式

图片(2).png

<meta name= "viewport" content= "width=device-width, user-scalable=no,
initial-scale= 1.0, maximum-scale=1.0, minimum-scale=1.0" >
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css" >

2.5 常用初始化样式

/* 初始化 */
body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 540px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
    }

2.6 特殊样式

图片(4).png

/*CSS3盒子模型*/
*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*点击高亮我们需要清除清除 设置为transparent完成透明*/
*{
    -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在ios上加，上这个属性才能给按钮和输入框自定义样式*/
input{
    -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { 
    -webkit-touch-callout: none; 
}

2.7 二倍精灵图做法

  • 在firework里面把精灵图等比例缩放为原来的一半
  • 之后根据新的大小测量坐标
  • 注意代码里面background-size也要写:精灵图原来宽度的一半

2.8 图片格式

2.8.1 DPG图片压缩技术

  • 京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg,实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。

2.8.2 webp图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。

avatar
文章
阅读
粉丝