CSS3移动端vw+rem不依赖JS实现响应式布局的方法


Posted in HTML / CSS onJanuary 23, 2019

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,移动要兼容,而且要求很高那么媒体查询还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
You might like
PHP文件读写操作相关函数总结
2014/11/18 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
js jquery数组介绍
2012/07/15 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
详解Python的Django框架中的中间件
2015/07/24 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python实现海螺图片的方法示例
2019/05/12 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
积极分子思想汇报
2014/01/04 职场文书
单位创先争优活动方案
2014/01/26 职场文书
安全生产计划书
2014/05/04 职场文书
护士医德医风自我评价
2014/09/15 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年预算员工作总结
2014/12/05 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
golang正则之命名分组方式
2021/04/25 Golang