适用于移动设备弹性布局的js脚本,响应式布局以

2020-02-02 作者:网站首页   |   浏览(106)

时间: 2019-01-29阅读: 364标签: rem背景介绍

响 应 式 布 局

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了。如何100%还原UI设计师的设计图,一直困扰着前端工程师。


css单位

 

学习首先我们简单了解下css目前都支持哪些单位:

一、响应式布局:写一套css样式可以兼容多个终端设备,为移动互联网的开发做出了重要贡献

px: 设置固定的布局或者元素大小,缺点是没有弹性em: 参考父元素的font-size,em会继承父级元素的字体大小,em的值并不是固定的rem: 相对根元素html的font-size%: 相对父元素,对于position: absolute;的元素是相对于已定位的父元素,对于position: fixed;的元素是相对于ViewPort(可视窗口)vw: view width的简写, 是指可视窗口的宽度,浏览器宽度1200px, 1 vw = 1200px/100 = 12 pxvh: view height的简写,是指可视窗口的高度,浏览器高度900px, 1 vh = 900px/100 = 9 pxvm: 相对于视口的宽度或高度中较小的那个, 其中最小的那个被均分为100单位的vm,浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 pxin: 寸cm: 厘米mm: 毫米pt: point, 大约1/72寸pc: pica, 大约6pt, 1/6寸

优点:一套样式可以兼容多个终端设备,灵活性更强

具有弹性布局能力的单位:

缺点:工作量增加,容易造成代码冗余,影响加载速度

em,%: 相对于父元素rem: 相对于htmlvw, vh, vm: 相对于可视窗口

  核心原理:主要使用css3的媒体查询实现不同设备的响应

从上可以看出,要做页面整体弹窗缩放的话,使用rem, vm, vw, vh更适合,因为任何内容都可以找到同一个基准。

二、媒体查询

HTML viewport基础概念

1.外联式媒体查询

viewport 是用户网页的可视区域。

<link rel="stylesheet" media="screen and (min-width:960px)" href="red.css"/>

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

<link rel="stylesheet" media="screen and (max-width:960px)" href="blue.css"/>

用法

当屏幕窗口大于960px时,引入red.css文件,当屏幕窗口小于等于960px时,引入blue.css文件

meta name="viewport" content="width=device-width, initial-scale=1.0"

2.内嵌式媒体查询

属性说明width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。height:和 width 相对应,指定高度。initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例,默认值1。maximum-scale:允许用户缩放到的最大比例。minimum-scale:允许用户缩放到的最小比例。user-scalable:用户是否可以手动缩放。弹性布局方案

@media screen and (min-width:960px){
body{
background:red;
}
}
@media screen and (min-width:640px) and (max-width:960px){
body{
background:blue;
}
}

通过以上可以看出,使用弹性布局的css单位配合设置html viewport元信息,就可以实现整体页面的弹性布局(包含字体大小)。

当屏幕窗口大于960px时,body背景色为红色,当屏幕窗口大于640px,并且小于960px时,body背景色为蓝色

先弄明白几个概念:

三、标准盒模型和怪异盒模型

设备分辨率:一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值;设备屏幕宽度:设备显示器的实际宽度;DPR:设备上物理像素和设备独立像素(device-independent pixels (dips))的比例,DPR = 设备分辨率/设备屏幕宽度;300ppi:每英寸300个像素点

标准盒模型=content padding border margin

思路

怪异盒模型=content margin

根据以上的概念,那么,我们知道

注:怪异盒模型中,padding和border不计入总宽总高中

window.devicePixelRatio = document.body.clientWidth / window.screen.width;

当没有写文档声明时,就会触发某些浏览器的怪异模式

如果屏幕分辨率宽是1080px,屏幕宽度为360px,那么DPR=1080/360=3。

四、box-sizing的可选属性值有哪些及其含义

如果现在UI设计图也是1080px,那么前端工程师不想丢失任何细节的使用代码如何还原呢?

1.box-sizing:border-box;

可以设置屏幕宽度为1080px, 设置viewport属性initial-scale = 1/3;

注:padding和border不会计入总宽,总高中(即怪异盒模型)

这样360px的屏幕就可以容纳1080px宽的内容了。

2.box-sizing:content-box;

但是每个手机的分辨率都不一样,那么如何来设置这个这个initial-scale呢?我们可以通过以下方式:

注:padding和border要计入总宽,总高中(即标准盒模型)

var scale = 1 / window.devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale='   scale   ', maximum-scale='   scale   ', minimum-scale='   scale);

注:box-sizing是css3新增的属性,低版本IE浏览器不支持

将user-scalable设置为no, 不允许缩放,有缩放需要的,可以不设置

主要应用在移动端

之后如何设置某一个区块的宽,高,或者字体大小呢?

 移 动 端 布 局

我们还需要设置html标签,字体的大小,我习惯于使用设计图的宽/20来获取元素的rem数值。比如


UI设计图文字大小30px, 那么我习惯使用 font-size: 1.5rem;UI设计图图片宽100px, 我习惯使用 width: 5rem;

 

那么我会设置html的font-size为 deviceWidht / (UI设计图宽/20);

一、移动端相关概念

var base = 720 / 20; // 720为UI设计稿的宽var fontSize = deviceWidth / base;document.documentElement.style.fontSize = fontSize   'px';

1.屏幕尺寸

结合以上,完整代码为:

屏幕尺寸是指屏幕对角线的长度,单位为英寸,1英寸=2.54厘米

script type="text/javascript"var scale = 1 / window.devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale='   scale   ', maximum-scale='   scale   ', minimum-scale='   scale);window.onresize = function (base) { var deviceWidth = (document.body.clientWidth  document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth; var screenWidth = window.screen.width; if (deviceWidth / screenWidth != window.devicePixelRatio) { document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); deviceWidth = (document.body.clientWidth  document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth; } var fontSize = deviceWidth / base; document.documentElement.style.fontSize = fontSize   'px';};window.onresize(720);/script

iphone7 4.5寸

以上代码我放在head里面,在html标签渲染前就开始设置。

iphone7plus 5.5寸

一开始就根据DPR设置initial-scale,之后在onresize里面设置html字体大小。

2.屏幕分辨率

大家会注意到onresize里面有这样一段代码:

屏幕分辨率是指横纵方向上的像素点数,单位为px,我们也把屏幕分辨率称为物理像素

var deviceWidth = (document.body.clientWidth  document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;var screenWidth = window.screen.width;if (deviceWidth / screenWidth != window.devicePixelRatio) { document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); deviceWidth = (document.body.clientWidth  document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;}

常见移动端设备屏幕分辨率

这一段代码是为了兼容一部分旧款机器,这些机器无法正常的获取到DPR值,那么我们就只能设置屏幕页面内容宽度为设备宽度。

iphone4 960px*640px

iphone5 1136px*640px

iphone6 1334px*750px

iphone7 1334px*750px

iphone6plus
=> 1920px*1080px
iphone7plus

3.屏幕像素密度:屏幕上每英寸可以显示的像素点数,称为屏幕像素密度,单位为ppi

4.设备像素比DPR:指物理像素与逻辑像素的比值,也叫做设备像素比(DevicePixelRetio)

注:物理像素指屏幕分辨率

  逻辑像素指设备尺寸

常见移动端设备尺寸:

iphone4 480px*320px dpr=2

iphone5 568px*320px dpr=2

iphone6 667px*375px dpr=2

iphone6plus 736px*414px dpr=3

5.移动端meta设置

默认情况下可视窗口的宽度大于我们移动端设备的宽度,此时我们需要做如下设置:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

注:sublime设置viewport快捷键:meta:vp tab键

二、常见移动端布局方案

yzc216亚洲城,1.百分比布局(流式布局):以百分比为主要单位进行页面布局

特点:文字流式,控件弹性,图片等比例缩放,顶部和底部不管分辨率怎么变化,高度都不变

注:适用于页面布局比较简单的移动端项目

典型案例:拉勾网

2.rem布局(等比例缩放布局)

特点:使用rem为主要单位进行页面布局,很好的实现了在页面在不同尺寸设备上等比例缩放

3.混合式布局

特点:将多种布局方式混合在一起使用,实现移动端屏幕的适配

三、移动端常用到的相关单位

1.px

像素,相对于屏幕分辨率而言

2.em

相对于父元素字体大小的单位

1em = 16px

注:em是相对于父元素字体大小放大或缩小多少倍

由于父元素字体大小不固定,所以不推荐使用em单位进行布局

3.rem

相对于根元素字体大小的单位

注:由于根元素(html)字体大小固定一般不会改变,所以推荐使用rem进行移动端布局

1em = 16px = 12pt = medium

4.vw

vw是viewport width的缩写,1vw = 视窗宽度的1% (设备宽度的1%)

vh 视窗高度

vmax vh和vw中较大的那个

vmin vh和vw中较小的那个

四、自定义字体

@font-face{
font-family:"自定义字体名称";
src:url(字体文件路径);
}

body{
font-family:"自定义字体名称";
}

 

 

本文由yzc216亚洲城发布于网站首页,转载请注明出处:适用于移动设备弹性布局的js脚本,响应式布局以

关键词: yzc216亚洲城