web前端适配

静态配置就是所谓的固定布局(pc端)

像素作为页面基本单位,不管设备浏览器宽度,只设计一套尺寸

1,适应布局
根据不同根据不同的分辨率加载不同的CSS样式文件(可切换固定布局)

(1)获取屏幕宽 window.screen.width

// 分辨率大于等于1680,大部分为1920的情况下,调用css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率再在1600-1680的情况下,调用css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css"&gt;');
}

注意:这里js一定要写在标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来

2. 媒体查询

媒体查询可以我们根据设备显示器特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式媒体查询由媒体类型一个多个检测媒体特性条件表达式组成。

(1)link元素中的CSS媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;

(2)利用css3的方式

必须设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;

viewport功能

  1. width 可以设置宽度 (devicewidth 当前设备的宽度,将布局视口设置成了理想的视口)

  2. height 可以设置高度

  3. initialscale 可以设置默认缩放比例([0,10] 初始缩放比例,1表示缩放

  4. userscalable 可以设置是否允许用户自行缩放,默认值yes

  5. maximumscale 可以设置[0,10]最大缩放比例

  6. minimumscale 可以设置[0,10]最小缩放比例

<meta name="viewport" content="" &gt; content="" 使用以上参数

  1. width=device-width 宽度一致比例是1.0

  2. initialscale=1.0 宽度一致比例是1.0

  3. userscalable=no 不允许用户自行缩放yesno 1,0)

标准适配方案

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"&gt;

总结
第一种是css2媒体查询用法最大的弊端是他会增加页面http请求次数,增加了页面负担。一般用第二种方法CSS3把样式都写在一个文件里面才是最佳的方法
但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。如果任何设置都没有默认走的就是viewport默认设置。

3. 弹性布局或rem布局(移动端)

rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。

(1)媒体查询结合rem布局

媒体查询动态修改元素大小,使得rem 一直在跟着变化,响应式就成功了。

为什么使用媒体查询结合rem布局?
一个物体一个超大空间中显得很小,但是在小的空间存放不下,为使得页面布局不管在什么设备上都是正常,协调的情况,就会采用媒体查询 +
rem,来根据不同的设备去相应的改变元素大小。 媒体查询结合rem布局的缺点:计算起来太繁琐

(2)flexble.jsrem布局

用法:首先在页面导入flexible.js导入去掉mete标签(禁止缩放)的设置

设计图为750px;从设计图量出header为88px

css设计headerheight 88/100=0.88rem;

(3)rem+VW布局

必须设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

为了方便计算可把html中font-size设置成100px;但是100px固定大小不会自动适配。所以把100px转换成vw

假如 设备750px dpr为 375px

因为 100vw=375px

所以 1vw=3.75px;

所以 100px=26.67vw

当设备640px :31.25vw

当设备750px :26.67vw

注意文字要单独设置单位为px,否则文字为100px太大,要用媒体查询的方式改变文字大小

优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应

缺点:这种rem+js只不过是宽度自适应高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。
(4)vw+vh布局

vw/vh 是一个相对单位(类似 emrem 相对单位) vw 是:viewport width 视口宽度单位 vh
是:viewport height 视口高度单位

相对视口的尺寸计算结果
1vw = 1/100 视口宽度
1vh = 1/100 视口高度
例如
当前屏幕视口是 375px,则 1vw 就是 3.75px,如果当前屏幕视口为 414px,则 1vw 就是 4.14px。

注意:和百分比区别百分比是相对于父元素来说的,而 vw 和 vh 总是针对当前视口来说的。

vw/vh用法元素单位直接使用新单位 vw/vh,因为 vw/vh 是相对单位,所以不同视口(屏幕)下,宽高一起变化完成适配

vh就是当前屏幕可见高度的1%,也就是height:100vh == height:100%;但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,但是设置height:100vh,该元素会被撑开屏幕高度一致。

vw就是当前屏幕宽度的1%,补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况。

4.百分比布局 (流式布局)

流式布局:就是百分比布局,非固定像素内容向两侧填充理解成流动的布局,称为流式布局.

百分比(%)作为页面基本单位,可以适应一定范围内所有的尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果

5.混合式布局

弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位

6.响应式布局(媒体查询+流式布局)

每个屏幕分辨率下面会有一个布局样式,即元素位置大小都会变。

媒体查询+流式布局:通常使用 @media 媒体查询 和网格系统 Grid System 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式技术统称。

优点:适应pc移动端,如果足够耐心,效果完美
缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小工作量不小,设计也需要多个版本

响应式页面在头部会加上这一段代码

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

原文地址:https://blog.csdn.net/Anony_me/article/details/125045884

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_39310.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注