chrome访问js文件 HTML中移动端有哪些布局方案

最近我研究了淘宝，天猫和网易彩票163的wap主页样式布局，今天给大家来总结一些移动端布局方案，并且分析一下所使用技术的利弊。

注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开

wty2368

移动端布局方案探究

研究了淘宝，天猫和网易彩票163的wap主页样式布局，总结移动端布局方案

注意：代码运行是file协议，在chrome里不支持引用本地文件，会提示跨域错误，可以用firefox或者Safari打开

当时做的ppt下载: 2015年12月移动端布局方案探究

一、基本概念

1. 物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元

2. 设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: CSS像素)

3. 位图像素

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)

4. 设备像素比(简称dpr)

设备像素比 = 物理像素 / 设备独立像素（在某一方向上，x方向或者y方向）

5. scale

缩放比：

scale = 1/dpr

6. 完美视口

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

二、网易彩票设计方案

网易彩票

采用scale = 1.0写死viewport

采用媒体查询来确定html根元素的font-size值，即rem值

rem + 百分比布局

媒体查询的css代码如下：

//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
//媒体查询css#media-query{
    @media screen and (min-width: 240px) {
        html,body,button,input,select,textarea {
            font-size:9px!important;
        }
    }
    @media screen and (min-width: 320px) {
        html,body,button,input,select,textarea {
            font-size:12px!important;
        }
    }
    @media screen and (min-width: 374px) {
        html,body,button,input,select,textarea {
            font-size:14px!important;
        }
    }
    @media screen and (min-width: 400px) {
        html,body,button,input,select,textarea {
            font-size:15px!important;
        }
    }
    // 省略
}

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-88997-1.html