网页响应式布局注意到的点（转）

时间 2019-11-17

标签网页响应布局注意到栏目 HTML 繁體版

原文原文链接

一：布局方式有以下几种：css

1. 固定布局：固定布局以PX(像素)做为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，可是这样设计有以下缺点：html

1.1.页面很死板，在更大的屏幕上，页面左右2边留白。前端

1.2.不适应响应性布局。node

2. 流式布局：流式布局是以百分比做为单位的，咱们要牢记以下公式：css3

百分比宽度 = 目标元素宽度 / 上下文元素宽度git

这种布局优势：能够自适应布局，根据不一样的分辨率显示不一样的宽度。github

缺点：在行高或者marginTop在大屏幕下看起来过高，在小屏幕下看起来太窄。web

3 弹性布局：弹性布局是以em做为单位的，一样弹性布局也支持以下公式：chrome

百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸json

使用em将文字像素px转换为相对单位，如今浏览器默认文字的大小是16px，若是一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 可是若是一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。

二：媒体查询：

根据特定的环境查询各类属性值，好比设备的宽度，是否横向使用不一样的css样式来渲染。

媒体查询使用以下：好比内联样式能够以下写：

1. 最大宽度960px一种布局：

@media screen and (max-width:960px) {<=960}

2. 最小宽度600px 另外一种布局：

@media screen and (min-width:600px) {>=600}

3. 宽度在600px 到 960px之间，以下:

@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

4.外联样式使用link标签来引用样式：

若是对于像ipad来讲，咱们能够在上面增长一个属性 orientation(landscape或portrait) 横屏或者竖屏。

理解meta各个属性的含义：

作h5页面移动端开发须要在head标签内引入下面这句话。（若是没有引入的话，页面的字体等大小就不正常了）。

具体含义以下：

Width: 控制viewport的大小。如device-width为设备的宽度。

initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。

maximum-scale 容许用户缩放到的最大比例，范围从0到10.0

minimum-scale: 容许用户缩放到的最小比例，范围从0到10.0

user-scalable：用户是否能够手动缩放，值能够是:

1， yes,true容许用户缩放；

2, no、false不容许用户缩放。 (只设置这一个属性，有的浏览器并不生效，咱们须要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1)。

综合：流式布局和弹性布局及配合媒体查询是响应性布局的最好方式。

可是针对响应性web布局使用媒体查询也有缺点的,缺点以下：

对于设计师：要针对不一样的屏幕大小设计不一样的设计，（例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等）。对于前端对于不一样的屏幕要写不一样的样式，增长了工做量，同时维护起来不是很方便(要维护几份不一样的css)。

三：图片

1. 对于背景图片来讲，css3有个属性 background-size能够等比例缩放背景图片。

可是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。因此咱们要想作的更好的话，可使用媒体查询根据设备的宽度来渲染不一样大小的背景图片。

2. 对于页面上的<img/>标签图片的话：

2.1. 若是只是页面上静态图片的话，不考虑带宽的状况下，可使用width=100%”等比例缩放，如：<img src=”XX.png” width=”100%”/>

2.2. 若是是商品图或者页面上有多个的话，考虑不浪费没必要要的带宽，须要后台根据不一样的设备宽度大小来返回不一样的json数据的图片来给咱们前端，以后咱们前端使用JS动态的渲染出来。

在现代浏览器中（包括IE8+）中要实现图片随着流动布局相应缩放很是简单，只须要在css中加上这么一句代码：

img { max-width:100%; }

含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，因此当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片自己永远不会覆盖容器。

四：理解css单位px，em，rem的区别：

1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。

2. em 是相对单位，相对于上下文元素而言，通常状况下，浏览器默认的字体大小是16px，也就是1em等于16px；好比：

3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你能够设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

好比设置html根元素以下代码：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

当一个p元素是24px的话，那么转换成rem为单位的话，那么只须要以下这样写便可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

五：元素未知宽度居中。

咱们先来介绍一下未知宽度，元素居中的方法，对于响应性web设计是有帮助的，咱们能够来了解下。

第一种方法：

假如页面html结构以下：

<div>

</div>

只须要给父级元素div 设置文本对齐是居中对齐。子元素设定display:inline-block便可。以下代码：

div{text-align:center}

p{display:inline-block}

第二种方法以下：

div{position:relative; left:50%; float:left;}

p{position:relative; left:-50%;}

六：媒体查询标准写法：media queries

@media 设备类型 and (设备特性-宽度) {

// css 样式

}

在css2.1中定义了10种设备类型，分别以下：

能够指定的值含义

all 全部设备

screen 显示器

print 打印用纸或打印预览视图

handled 便携设备

tv 电视机类型的设备

speech 语音和音频合成器

braille 盲人用点字法触觉回馈设备

embossed 盲人打印机

projection 各类投影设备

tty 使用固定密度字母栅格的媒介，好比电传打字机和终端

Css设备特性共有13种，是一个相似于CSS属性的集合。但与CSS属性不一样的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。

设备特性以下表：

特性可指定的值是否容许使用min/max前缀特性说明

width 带单位的长度数值容许浏览器窗口的宽度 css

height 带单位的长度数值容许浏览器窗口的高度

device-width 带单位的长度数值容许设备屏幕分辨率的宽度值

device-height 带单位的长度数值容许设备屏幕分辨率的高度值

orientation 只能指定两个值:portrait或landscape 不容许窗口的方向是纵向仍是横向

aspect-ratio 比例值，例如：16/9 容许窗口的纵横比，比例值为浏览器窗口的宽度值/高度值

device-aspect-ratio 比例值，例如：16/9 容许设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值

color 整数值容许设备使用多少位的颜色值，若是不是彩色设备，该值为0

color-index 整数值容许色彩表中的色彩数

monochrome 整数值容许单色帧缓冲器中每像素的字节数

resolution 分辨率值，譬如300dpi 容许设备的分辨率

scan 只能指定两个值：progressive或interlace 不容许电视机类型设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描

grid 只能指定两个值:0或1 不容许设备是基于栅格仍是基于位图。基于栅格时该值为1，不然该值为0

上面是一些响应式web设计的基本知识点，下面咱们能够详细讲解下响应式web设计如何实践？

1. 首先须要在页面头部引入这行meta代码，以下：

还要引入这一句：

咱们的代码有相似于电话这样的数字的时候，由于有的手机上它会自动转换成能够拨打电话，因此咱们加上这句就不会了。

2. 响应性web设计须要使用css3媒体查询media来写不一样的css样式。

在移动端浏览器中或者某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方定义为，设备的物理像素与设备的独立像素的比例，也就是 devicePixelRatio = 设备的物理像素/ 设备的独立像素。这三个参数不是固定的，只要其中2个肯定了，那么就能够知道第三个参数了，设备的物理像素咱们能够映射到设备的分辨率的宽度，独立像素咱们能够映射到媒体查询media定义的宽度。而比列devicePixelRatio咱们能够理解为css中的1像素(px)在设备上占用多少个物理像素。好比咱们目前常见的手机分辨率以下：

手机类型：分辨率

小米3 1080*1920

小米2 720*1280

红米Note 720*1280

魅族4 1152*1920

魅族3 1080*1800

魅族2 800*1280

iphone6 750*1334

iphone5s 640*1136

iphone4s 480*800

iphone3s 320*480

三星 720*1280

三星 480*800

如上小米3分辨率为1080，独立像素为360px，那么比列为3，也就是一个css的1px，占用3个物理像素，小米2和红米Note分辨率为720，独立像素仍是360px，因此比列为2，因此小米3相对于小米2与红米Note更清晰。同理iphone和其余类型的手机也同样。

而上面说的独立像素就是360px，正是咱们css中的媒体查询关联的。

以下咱们能够在css加上这样的媒体查询就能够匹配到样式了；以下：

/* 针对手机屏幕的宽度是360 384等屏幕的宽度

*width(宽度能够设置为384px) max-width:384来计算可是边距字体大小等仍是安装360px来计算

*****************************************/

@media (min-width:360px) and (max-width: 399px) {}

而咱们目前的独立像素有320,400的，咱们也能够增长css媒体查询。以下：

/* min-width:320px

* 针对设备独立像素为320px 的css

* min-width:320 和 max-width:639之间 320-639公用样式也包含在里面

============================*/

@media (min-width: 320px) and (max-width:639px){}

* 针对设备独立像素为400px

========================*/

@media (min-width: 400px) and (max-width:401px){}

可是也还有些目前还未知的独立像素，好比将来的某时刻有大于640px的独立像素，或者是说咱们手机移到竖屏时候，咱们也能够针对适应的作一点匹配。以下咱们针对640px-999px作一个匹配。

/* min-width:640px

* 针对设备独立像素为640px 的css

* min-width:640 和 max-width:999之间

============================*/

@media (min-width: 640px) and (max-width:999px){}

可是在PC端，咱们为了适应PC端，因此针对宽度为1000以上也作一个显示处理。

/* 最小宽度1000样式

*为了适应PC端因此PC端在设计时候默认以1000px来设计的

=======================*/

@media screen and (min-width:1000px) {}

咱们都知道在IE6-8下 IE是不支持css3中的媒体查询的，因此在网上有大牛已经帮咱们考虑到这个问题了，因此只须要在网上下载 respond.js下来放到咱们本地，而后页面上引入便可。respond.js的github地址以下：

https://github.com/scottjehl/Respond/

经过以上：咱们能够对编写css响应性web设计有一个规范，以下：(固然若是你们有更好的方法也能够提出来。)

1. 头部reset.css 是否要独立出来一个css文件，或者不独立出来直接放在css顶部。

2. 公用的头部或者尾部样式直接放在css文件顶部，及公用的页面css样式放在顶部(添加注释。)

3. 媒体查询css样式分别以下组织：

1. 移动端开发css媒体查询代码组织以下：

/* min-width:320px

* 针对独立像素为320px 的css

=======================================================================================================*/

@media (min-width: 320px) and (max-width:639px){

/* css style*/

}

/* 针对独立像素的宽度是360 384等

* max-width:384来计算可是边距字体大小等仍是安装360px来计算

*****************************************/

@media (min-width:360px) and (max-width: 399px) {

/* css style*/

}

/* 针对独立像素为400px

=======================================================================================================*/

@media (min-width: 400px){

/* css style*/

}

/* 针对独立像素大于640以上的小于999的

=======================================================================================================*/

@media (min-width: 640px) and (max-width:999){

/* css style*/

}

2. 在PC端 1000以上的媒体查询写在以下里面：

@media screen and (min-width:1000px) {

/* css style*/

}

4. 基本的编码规范注意事项以下：

1.给html根元素字体大小定义相对单位(rem)以下：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

以后的元素字体使用rem做为单位。好比h2字体大小是24px，那么在移动端字体大小设置为 font-size:2.4rem 在媒体查询@media (min-width:1000) {}内字体大小但愿能够写2个，font-size:24px;font-size:2.4rem,这是为了将来的移动设备独立像素超过1000后能使用rem做单位。

2.根据设计稿给body元素设置默认的font-size及color，以后的媒体查询根据自身的条件须要覆盖font-size及color的话就覆盖掉。

3.在对应的设备媒体查询内，有不少公用的css样式但愿合并，好比这样的：

.six-qa li .q{line-height:26px;font-size:1.6rem;}

.six-qa li .a{line-height:26px;font-size:1.6rem;}

能够直接合并成以下：

.six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

编写响应性web设计css媒体查询更好的方案思考？

咱们都知道，为了自适应各类设备，咱们须要编写不一样的css进行适配，好比宽度，外边距，内边距，字体大小等不一样，须要不一样的适配，那么咱们如今能不能编写一份css呢，好比我编写一份针对：独立像素为400屏幕宽度的编写一份css样式，而后其余的样式，好比320的，384的，360的或者640以上的，针对这些css样式，咱们能不能使用NodeJS来自动读取400的css，而后分别对上面独立像素大小的屏幕进行比例一下，好比屏幕400像素的 font-size:24px 那么 320px的屏幕字体大小就是 font-size = Math.floor(320*24/400),其余css属性都按照这种方式来作，那么在本地就能够生成不一样的版本css了(好比针对320版本的，针对640以上css版本的)，而后在head头部分别引入不一样的css版本，好比以下引入：

咱们知道，只要设备的宽度在以上任何一种的时候只会渲染一份css，其余的css不渲染，因此咱们能够按照这种方式来作一份css。至于这种方案我之后会使用nodeJS来作出来的