媒体查询（黑马笔记）-移动端布局rem

一，了解px，em,rem的区别

px:像素
em：长度单位，基准是父元素的font-size值大小。
rem:长度单位，基准是html的font-size值大小。

二，媒体查询

一旦采用rem布局，屏幕上的元素大小就会和html的字体大小相联系起来，也就是说，html的字体一变化，全局元素就会随之变化。
但是存在一个问题，屏幕不同的情况下，如何去变化这个字体大小，从而引发全局重新渲染呢？
这就要引入媒体查询的概念：
媒体查询可以根据不同的屏幕尺寸，选用不同的样式！
语法规范如下：

例如：当屏幕尺寸变化时，采用对应尺寸的样式

<style type="text/css">@media screen and (max-width:900px){body{background: red;}}@media screen and (max-width:800px){body{background: green;}}@media screen and (max-width:700px){body{background: yellow;}}</style>

三，媒体查询+rem就可以实现元素的动态变化了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">@media screen and (min-width:320px){html{font-size: 50px;}}@media screen and (min-width:640px){html{font-size: 100px;}}.top{height: 1rem;font-size: 0.5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}</style></head><body><div class="top">购物车</div></body>
</html>

实现的两档变化：

四，引入资源

实际上就是准备多套css文件，当条件变化至满足某个条件时，就调用对应的css文件：

媒体查询（黑马笔记）-移动端布局rem相关推荐

vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
移动端布局 - REM方式
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...
移动端布局 - rem布局
文章目录一.rem单位二.媒体查询语法参数媒体类型关键字媒体特性案例一.rem单位 rem是一个相对单位, 类似于em , em表示的是父元素字体大小 rem的基准是相对于html元 ...
6.移动端布局-rem布局
1.rem基础优点:可以通过修改html里边文字的大小来改变页面中其他元素的大小,可以实现整体控制 1.1 rem单位 rem(root em)是一个相对单位,类似于em. em是相对于自身元素字体 ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
css 媒体查询移动端,媒体查询（pc端，移动端不同布局）
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...