移动端屏幕自适应布局
1、技术点 移动端自适应采用百分比布局比较适合。需要说明一点的是:height的百分比是以父元素的 宽度 计算的,由于移动端父元素宽度有时没有给定值(如父元素宽度为100%),此时子元素的height就为0。 因此子元素的高度值使用padding-top或者padding-bottom撑起。 同时height的高度设置为0,防止font-size或line-height等属性影响到height。 2、示例 示例为展示图片,每行展示3个图片。每列图片宽度33%,图片间距为0.5%。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="author" content="Tencent-TGideas" /> <meta name="Copyright" content="Tencent" /> <title>实例-图片列表</title> <style> * { margin: 0; padding: 0; } ol, ul { list-style: none; } html,