https://github.com/amfe/lib-flexible
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
http://www.cnblogs.com/well-nice/p/5509589.html
https://www.w3cplus.com/css3/css-grid-flexbox-solving-real-world-problems.html
html的font-size、
https://design.google.com/devices/ 科学上网
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
demo
http://huodong.m.taobao.com/act/yibo.html
rem-6.jpg
视窗 viewport
https://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport
https://www.w3cplus.com/css/viewports.html
物理像素(physical pixel)
又被称为设备像素，设备中一个最微小的物理部件
设备独立像素(density-independent pixel)
也称为密度无关像素，计算机坐标系统中的一个点
CSS像素
CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs著作权归作者所有。
屏幕密度
屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。
设备像素比(device pixel ratio)
设备像素比简称为dpr
设备像素比 ＝ 物理像素 / 设备独立像素
JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr
CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
meta标签
CSS单位rem
font size of the root element.
rem就是相对于根元素<html>的font-size来做计算
字号不使用rem
header,footer{
height:.90rem;
}
//字号单独用px即可 ，这里建议大家用变量定义小中大正常集中字号常量就可以，不用每次去针对具体样式做字号调整。
@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}
@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}
//设置基本的字号,基本元素取材除100即可得到rem的大小，当然也可以用16px换算改变根字号为6.25rem即可。因为还有很大比例的手机设计为320的，所以这里考虑为640的。当屏幕大于640的时候，不再放大，让页面处于水平居中640px显示。
function fontAuto(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
}
fontAuto();
window.onresize=function(){
fontAuto();
}
动态设置viewport的scale
js中可以通过devicePixelRatio拿到具体的设备像素比值
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
动态设置font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
//根据屏幕大小及dpi调整缩放和大小
(function() {
var scale = 1.0;
var ratio = 1;
if (window.devicePixelRatio >= 2) {
scale *= 0.5;
ratio *= 2;
}
var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
document.write(text);
document.documentElement.style.fontSize = 50*ratio + "px";
})();
响应式布局
@media (max-width:768px){
//css
}
<link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>
function changeViewport(){
// UI-width ：WebApp布局宽度
// device-width ：屏幕分辨率宽度
// target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
var uiWidth = 750,
deviceWidth = (window.orientation == 90 || window.orientation == -90) ? window.screen.height : window.screen.width;
devicePixelRatio = window.devicePixelRatio || 1;
var myScale = deviceWidth / uiWidth;
var targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
//alert(uiWidth+","+deviceWidth+","+devicePixelRatio+","+myScale+","+targetDensitydpi);
var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ',target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no';
//var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ', width=device-width, user-scalable=no';
document.querySelector('meta[name=viewport]').attributes['content'].value = viewportContent;
}
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
changeViewport();
}, false);
changeViewport();
网友评论