ul 响应式 布局_响应式页面常见面试点

原标题：响应式页面常见面试点

1、H5页面(APP端)

1.1 APP端页面用HTML5制作，头部需要加适配信息：

7.13活动报名

1.2 页面制作时，注意布局，通常：

1.2.1 重要的图片用img标签(例如头部banner等包含特定信息的内容图片)，不重要的底板用背景形式显示，例如底部背景

1.2.2 img图片，布局需要通常外层包含一个父级，例如div、header、p等等

1.2.3 表单通常用form形式(无论是表单提交还是ajax提交)，标签通常用span+input，用p包住，方便布局，例如：

姓名：

1.2.4 列表通常用ul形式，li里面有图片和文字，通常用div包图片，文字用p：

• 

  活动详情

1.2.5 可以用header、section、footer等H5标签代替div标签

1.3 切图要求时：

1.3.1 除非整个背景是复杂的渐变等等，否则一般不切整块图做整个页面背景。通常是一部分一部分切，背景用background-color渲染，需要和设计协商。

1.3.2 切图时，许多东西可以是图片，比如特殊字体、小部分特殊规则说明，用图片的形式避免特殊字体无法显示的窘境。

1.3.3 (APP时，PC端无此规则)为防失真，设计给的图片通常都是750px(是Iphone6的屏幕尺寸两倍大《375px》)，所以如果用两倍大的图片量尺寸且在iPhone6下做测试，在页面布局的时候要除以2，并且通常为了适应浏览器的缩放，布局用rem做单位。

1.4 CSS布局时：

1.4.1 px、em、rem以及百分比%的区别和使用。

px：比较精确和稳定，1px=1像素，如果设置div宽度为100px，假设屏幕分辨率为1024*760，则表示1024分辨率(1024px)中有100px被div占据(分辨率以像素px作为基本单位)，这和屏幕大小没有关系，也不随显示窗口大小的改变而改变，只和分辨率有关(所以窗口变小了，该div依旧200px，如果窗口不够大会出现滚动条；但是假设分辨率从1024*760改为800*600，此时div依旧200px，那么div会感觉变大了《因为同样大小的屏幕，分辨率从1024-->800》)

em：1) 相对于body元素，1em=body元素的font-size大小 2) em会继承父级，如果父级设置了font-size，则 1em=父级元素的font-size大小，是相对大小，但是需要确定父级font-size

rem：相对于根元素的font-size大小(没有了继承父级尺寸概念，不会嵌套多了混乱)，为了方便，通常设置元素大小时10px，此时10px=1rem; 此满足了自适应不同屏幕大小的要求，用rem或者%做单位

%：百分比是相对于父级元素，注意给最外层设置高度为百分比时，需要给html和body元素设置100%;

html, body{

width: 100%;

height: 100%;

}

1.4.2 背景图片设置：

background: url(../img/success.png);

background-size: 100% 100%;

background-repeat: no-repeat;

background-position:top center;

1.4.3 屏幕自适应，设置HTML根元素的最小屏和最大屏时的font-size，影响rem

// 屏幕自适应

var oHtml = document.documentElement;

getSize();

window.onresize = function() {

getSize();

};

function getSize() {

var screenWidth = oHtml.clientWidth;

if (screenWidth <= 320) {

oHtml.style.fontSize = 10 + 'px';

} else if (screenWidth >= 640) {

oHtml.style.fontSize = 20 + 'px';

} else {

oHtml.style.fontSize = screenWidth / 640 * 20 + 'px';

}

}

1.4.4 vertical-align：只对行内元素有效，注意不是对文字进行设置，而是对占空间的图片等进行设置，text-top、text-bottom

1.4.5 input type="tel" app开发时，输入框会第一时间弹出数字输入框

2、关于微信二次分享 http://www.cnblogs.com/joshua317/p/4761948.html

2.1 页面中引入js文件

< type="text/java" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js">>

2.2 定义参数，包括需要分享的url、imgUrl、title、desc(deion描述)以及四个需要从后台获取的参数(appId、timestamp、nonceStr、signature)和一个需要用到的微信jsapi列表参数(jsApiList)

// 分享页面

var wurl = location.origin + '/h5/..../lottery.html';

var wtit = '标题标题';

var wimg = "图片地址";

var wdesc = '内容描述';

var this_url = encodeURIComponent(location.href.split('#')[0]);

$.ajax({

url: '/api..../get-signature?url=' + this_url,

type: 'get',

success: function(data) {

wx.config({

// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: data.response.appid, // 必填，公众号的唯一标识

timestamp: data.response.timestamp, // 必填，生成签名的时间戳

nonceStr: data.response.noncestr, // 必填，生成签名的随机串

signature: data.response.signature, // 必填，签名，见附录1

jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

wx.ready(function() {

wx.onMenuShareTimeline({

title: wtit, // 分享标题

link: wurl, // 分享链接

imgUrl: wimg // 分享图标

});

wx.onMenuShareAppMessage({

title: wtit, // 分享标题

desc: wdesc, // 分享描述

link: wurl, // 分享链接

imgUrl: wimg, // 分享图标

// type: '', // 分享类型,music、video或link，不填默认为link

// dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空

});

}

责任编辑：