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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python学习必备知识汇总
2017/09/08 Python
简单了解什么是神经网络
2017/12/23 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python实现拼接图片
2020/03/23 Python
对python中list的五种查找方法说明
2020/07/13 Python
django使用graphql的实例
2020/09/02 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
师说教学反思
2014/02/07 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
应届生求职信范文
2014/05/26 职场文书
初中同学会活动方案
2014/08/22 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers