CSS3移动端vw+rem不依赖JS如何实现响应式布局的方法-创新互联

这篇文章给大家分享的是有关CSS3移动端vw+rem不依赖JS如何实现响应式布局的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站，专注为中小企业提供官网建设、营销型网站制作、自适应网站建设、展示型网站建设、成都做网站等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

1、前言

（1）vw/vh介绍

在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即为屏幕的1%，与之对应的是vh，把高分成一百份，1vh即为屏幕高的1%，一般我们常用的vw单位来完成响应式开发

（2）rem介绍

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如你html设置的字体为20px，那么页面中的1rem就相当于20px，举个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,h2 {
    font-size: 12px;
}
p {
    font-size: 2rem;
}
</style>
</head>
<body>
<h2>我是h2中的文字</h2>
<p>我是p标签中的文字，是h2文字的两倍</p>
</body>
</html>

2、正文

（1）有了上面对这两个单位的了解，我们就可以通过换算来完成移动端的响应式布局处理，这里我们用iPhone6/7/8的手机为例，屏幕宽度为375px。

1vw = 3.75px

（2）好，现在我们想象下100px等于多少vw呢？这里需要计算一下。

100px = 26.6666666vw     //因为是无限循环，这里取7位小数

（3）那么怎么把rem和vw联系起来呢？这里我们来写一个小案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        html{
            font-size: 26.6666666vw  
        }
        p{
            font-size: 0.2rem;
            width: 2rem;
            height: 1rem;
            background: pink;
            margin: 0 auto;
            line-height: 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <P>我是P标签中的文字</P>
</body>
</html>

上面的案例我们把html中的font-size设置为26.6666666vw，这代表着font-size=100px，然后结合rem的特性就实现了前端css响应式布局

总结：前端响应式布局有很多种，pc端的响应式框架也有很多，移动端的很多框架也自带响应式，这种方法我觉得也是比较好用的方法，html中的font-size大家可以随意设置，只是换算过来很麻烦，于是很多方法也就产生了，很多编辑器有自动换算的功能，比如我用的sublime编辑器，网上也有很多在线的网页在线转化，好了，以上就是我的使用心得，如有错误之处，请大家多多指正！

3、其他响应式布局介绍

（1）流式布局

流式布局即百分比布局，例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

（2）媒体查询

媒体查询是监听当前屏幕的宽度来响应你对应的设置，比如375px的屏幕字体为12px，960的屏幕字体为18px，对于简单的页面来说写起来很庞大，但是对于大型项目来说还是很方便的，媒体查询有个特点就是比如你从375px屏幕缩放到960px屏的时候字体或者图片会突然放大，也算是一种不好的体验吧，但是实际运用中并没有什么关系。
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

设计方法：媒体查询+流式布局。

总结：

1.如果只做pc端，那么流式布局（定宽度）是好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（vw）是好的选择，一份css调节font-size搞定；

3.如果pc，移动要兼容，而且要求很高那么媒体查询还是好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

感谢各位的阅读！关于“CSS3移动端vw+rem不依赖JS如何实现响应式布局的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网站题目：CSS3移动端vw+rem不依赖JS如何实现响应式布局的方法-创新互联
本文URL：https://www.cdcxhl.com/article16/ioodg.html

成都网站建设公司_创新互联，为您提供微信公众号、移动网站建设、营销型网站建设、自适应网站、网站维护、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容