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,h1 {

	font-size: 12px;

}

p {

	font-size: 2rem;

}

</style>

</head>

<body>

<h1>我是h1中的文字</h1>

<p>我是p标签中的文字，是h1文字的两倍</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实现响应式布局的更多相关文章

  1. 利用JS去做响应式布局

    利用JS去做响应式布局 js动态改变布局方式 // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();// 页面加载完 ...

  2. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  3. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  4. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  5. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  6. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  7. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. Glide.js：响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

随机推荐

  1. 用Python分析国庆旅游景点，告诉你哪些地方好玩、便宜、人又少

    注:本人参考“裸睡的猪”公众号同名文章,学习使用. 一.目标 使用Python分析出国庆哪些旅游景点:好玩.便宜.人还少的地方,不然拍照都要抢着拍! 二.获取数据 爬取出行网站的旅游景点售票数据,反映 ...

  2. 立即执行函数(function(){})()与闭包

    立即执行函数 匿名(function(){})() 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来. $(function(){}) $(function(){});是$ ...

  3. JMETER 生成测试报告

    JMETER测试报告样例 JMETER 提供的生成测试报告功能,能够生成漂亮的HTML测试报告. 上图是测试统计图 20个用户并发,测试时长一分钟,发起流程320次,没有出错,TPS为6.5,平均发起 ...

  4. 工作不久的安卓开发者，他们是这样规划自己的Android学习路线

    Android开发工作者工作不久的时候,会有一段迷茫期,觉得自己应该再学一点,却不知道从何学起,该怎样规划自己的学习路线呢?今天,我给大家梳理一下Android基础,就像建造房屋一样,要建造一座宏伟的 ...

  5. 一探istio-proxy(envoy)容器里的秘密

    今天,在测试环境跑通了istio. 惭愧,是用MicroK8s跑的,其它环境,不敢呀. 基本功能都OK了. 在运行了istio-injection=enabled之后,每个pod运行时,会多一个ist ...

  6. django 统计表

    1. 复杂版 统计,通过跨表查询和timedate模块过滤找到 from django.db.models import Count class TongJiView(View): def today ...

  7. 使用WIFI网卡 wpa_supplicant

    在上篇文章中,编译了应用程序iw,它使得我们的开发板可以通过usb wifi网卡连接到无线热点,为了方便实验,我们采用了手机设置了无线热点.对手机的热点有4中安全方式:无WEPWPAWPA2使用iw工 ...

  8. python类定义的讲解

    python是怎么定义类的,看了下面的文章大家就会了,不用多说,开始学习. 一.类定义: 复制代码代码如下: class <类名>: <语句> 类实例化后,可以使用其属性,实际 ...

  9. USACO Superprime Rib

    洛谷 P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib 洛谷传送门 JDOJ 1673: Superprime Rib JDOJ传送门 题目描述 农民约翰的母牛总是产生最好 ...

  10. Lotus words

    We are going to memorize a lot of words in the fourth grade of primary school. It's very difficult f ...