科普下:

平时很少用的css单位:

1.长度单位:

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

vw:相对于视口的宽度。视口被均分为100单位的vw;

vh:相对于视口的高度。视口被均分为100单位的vh;

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

ch:数字0的宽度;

2.角度单位(transform用到的比较多)

deg:度(Degress)。一个圆共360度;

grad:梯度(Gradians)。一个圆共400梯度;

rad:弧度(Radians)。一个圆共2π弧度;

turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;

视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以解决各种屏幕适配问题!

vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配)

vw + vh + rem布局首先还是

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其次:直接上代码

<template>
<div class="mobile_box">
<h1>移动端测试布局使用vw+vh+rem</h1>
<div class="test_port">
<p>测试视口</p>
</div>
</div>
</template>
<script>
export default {
data() {
return { }
},
methods: { }
} </script>
<style scoped>
.test_port {
width: 30vw;
height: 50vh;
line-height: 50vh;/*讲白了就是可视窗口宽高单位 + 字体用rem等比缩放*/
font-size: 1rem;
text-align: center;
font-weight: bold;
border:1px dashed #ccc;
background-color: rgba(255, 255, 255, 0.8);
} h1 {
text-align: center;
} </style>

总结:代码这样的东西没必要完全按照别人的来,怎么合适怎么方便怎么效率好怎么来咯。

另外附上媒体查询@media

@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}

转自:https://www.cnblogs.com/lhl66/p/9475531.html

vw+vh+rem响应式布局的更多相关文章

  1. css新单位vw,vh在响应式设计中的应用

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

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

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

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

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

  4. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  5. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  6. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

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

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

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

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

  9. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

随机推荐

  1. mock数据

    作为前端经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据. 在这里我们使用node.js来实现 http://www.cnblogs.com/bsn-hua ...

  2. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

  3. 转载:WEB前端的优化

    一.HTML优化 避免使用Iframe Iframe也叫内联frame,可以把一个HTML文档嵌入到另一个文档中.使用iframe的好处是被嵌入的文档可以完全独立于其父文档,凭借此特点我们通常可以使浏 ...

  4. Java分支结构 - if...else/switch

    Java分支结构 - if...else/switch 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支结构. Java有两种分支结构: if语句 switch语句 if语句 一个if语句包含一 ...

  5. centos网卡配置

    DEVICE=物理设备名 IPADDR=IP地址 NETMASK=掩码值 NETWORK=网络地址 BROADCAST=广播地址 GATEWAY=网关地址 TYPE=Ethernet (网络类型)ON ...

  6. [洛谷U63006]导函数最小系数

    U63006 导函数最小系数 题面 给出一个n次函数\(f(x)=a_{n}x^{n}+a_{n-1}x^{n-1}+...+a_{1}x+a_0\)的各项系数\(a_n,a_{n-1}...a_1, ...

  7. 第一阶段考试:实战Linux系统日常管理

    1. [项目名称] 实战Linux系统日常管理 [项目说明] 1.安装部署rhel系统,组建RAID磁盘阵列. 2.安装nginx 通过脚本编写 nginx服务服务启动脚本 [项目考核技能点] 1.安 ...

  8. 转:kafka入门

    一.基本概念 介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语:Kafk ...

  9. div居中和table居中,jQuery获取下拉列表值

    一.div居中 margin-left: auto;margin-right: auto; <div  style="width:960px ; margin-left: auto;m ...

  10. Algorithm4.子数组求和贪心

    子数组求和最大问题 20131011 问题描述 一个数组中,有整数也有复数,求这个数组的所有子数组中,求和最大的值. 这是一个动态规划问题,乍看上去没有什么简单的方法,把所有的情况列出来就可以了,但是 ...