![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
响应式布局
wangshang1320
曾梦想仗剑走天涯,看一看世界的繁华,后来bug太多,项目经理不让走
展开
-
响应式网站布局(三)
本文说一下百分比和rem,em等自适应单位来实现响应式布局吧 1.百分比布局 针对响应式网站,可能百分比是最直观也是最简单的,给父亲设置固定宽高,子元素用百分比设置 比较直观的就是bootstrap框架就是典型的百分比布局 2.px,rem,em, vw,vh vw:设备可视宽度 默认为100vw vh:设备可视高度 默认为100vh px:1px=1像素 rem:参照物为...原创 2019-02-20 09:35:43 · 187 阅读 · 0 评论 -
响应式网站布局(二)之flex布局
flex弹性布局 概述: flex布局是css3中用的比较多的 比较实用,很多场景都能用到,而且比较简单,方便。 使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item)。容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。主轴开始的位置,即主轴与右边框的交点,称为main start;主轴结束的位置称为mai...原创 2019-02-18 10:30:34 · 296 阅读 · 0 评论 -
响应式网站布局(一)之媒体查询
媒体查询 @media 1. 设置 Meta 标签(适用于移动端) 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 <meta name="viewport" content="widt...原创 2019-02-18 10:02:04 · 243 阅读 · 0 评论