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-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
express express-session的使用小结
2018/12/12 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
django 创建过滤器的实例详解
2017/08/14 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python爬虫基础知识点整理
2020/06/02 Python
Python gevent协程切换实现详解
2020/09/14 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
最新自我评价范文
2013/11/16 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
运动会口号8字
2014/06/07 职场文书
公司离职证明标准范本
2014/10/05 职场文书
母亲去世追悼词
2015/06/23 职场文书
葬礼主持词
2015/07/02 职场文书