css布局－响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container{
margin: 0 auto;
max-width: 800px;
display: flex;
border: 1px solid black;
}
.left{
width: 200px;
background: red;
margin: 5px;
}
@media (max-width:640px) {
.left{
display: none;
}
}
.right{
flex: 1;
background: blue;
margin: 5px;
}
</style>
<body>
<div class="container">
<div class="left">
这是一些不重要的内容，比如友情链接、广告
</div>
<div class="right">
这里是一些重要的内容，比如一篇文章，文章是整个核心内容。
这里是一些重要的内容，比如一篇文章，文章是整个核心内容。
</div>
</div>
</body>
</html>
head里面有一句viewport(第三点)。这个viewport的含义是什么呢，这里面有一个width=device-width。就是说我们可视区域大小就等于屏幕大小。否者手机端，比如iphone上面会默认页面宽度是980。所以一点点屏幕要显示980的内容，内容就会被缩小很多。这个案例也同时看到media query是怎么使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container{
margin: 0 auto;
max-width: 800px;
border: 1px solid black;
}
.intro{
display: inline-block;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
border-radius: 90px;
border: 1px solid red;
margin: 7px;
}
@media(max-width:640px){
.intro{
margin: 7px auto;
display: block;
}
}
</style>
<body>
<div class="container">
<div class="intro">介绍1</div>
<div class="intro">介绍2</div>
<div class="intro">介绍3</div>
<div class="intro">介绍4</div>
</div>
</body>
</html>
这个案例就是折行的方式自适应。但是我们注意到另外一个问题，就是屏幕大小不管多大，我们的文字和圆圈都是那么大，当屏幕小的时候，会挤压空白区域，文字和圈圈的占比就会变大。可不可以采用等比例的方式呢。这种是可以的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html{
font-size: 20px;
}
.container{
margin: 0 auto;
max-width: 800px;
border: 1px solid black;
}
.intro{
display: inline-block;
width: 9rem;
height: 9rem;
line-height: 9rem;
text-align: center;
border-radius: 4.5rem;
border: 1px solid red;
margin: 0.3rem;
}
@media (max-width: 375px) {
html{
font-size: 24px;
}
}
@media (max-width: 320px) {
html{
font-size: 20px;
}
}
@media(max-width:640px){
.intro{
margin: 0.3rem auto;
display: block;
}
}
</style>
<body>
<div class="container">
<div class="intro">介绍1</div>
<div class="intro">介绍2</div>
<div class="intro">介绍3</div>
<div class="intro">介绍4</div>
</div>
</body>
</html>
rem的方式是基于html里面的font-size进行计算。这里是1rem=20px。那么之前的180px就是2rem。90px就是4.5rem。那么针对不同屏幕，我们可以改变font-size的基准达到字体大小的变化。这里要注意大屏的要放上面，小屏的放下面。不然按覆盖原则始终用的是下面的。第二个要注意的是rem是不精确的，在换算的过程中可能存在小数，是除不尽的。所以对于精确度要缺十分高的屏幕，不要使用rem布局
css布局－响应式布局的更多相关文章
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...
- flex布局 响应式布局
移动端页面开发流程 移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...
- 用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...
- css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...
- 【css】响应式布局入门【转】
最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
- CSS的响应式布局
响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...
- css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
- CSS实现响应式布局(自动拆分几列)
1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...
- Css布局 响应式布局介绍
1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...
随机推荐
- 数据库nomount mount open阶段走向
先来简要了解一下Oracle数据库体系架构以便于后面深入理解,Oracle Server主要由实例(instance)和数据库(database)组成.实例(instance)由共享内存(SGA)和后 ...
- Angular4+NodeJs+MySQL 入门-06 接口配置
在上篇中说了怎么调用接口,这篇就来说说,接口配置吧. 后端是用NodeJS来写的,由于写后台(以前用的是C#语言)的时候,大部操作都在是对数据库表的增.删.改.查操作, 比如:根据查询出来的数据,然后 ...
- 牛客网Java刷题知识点之Map的两种取值方式keySet和entrySet、HashMap 、Hashtable、TreeMap、LinkedHashMap、ConcurrentHashMap 、WeakHashMap
不多说,直接上干货! 这篇我是从整体出发去写的. 牛客网Java刷题知识点之Java 集合框架的构成.集合框架中的迭代器Iterator.集合框架中的集合接口Collection(List和Set). ...
- 清除浮动clear-left-right-both-none效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Java动态性 字节码操作
Java动态性的两种常见方式:-字节码操作 - 反射;字节码操作比反射开销小,性能高,JAVAasist性能高于反射,低于ASM 运行时操作字节码可是实现 : 动态生成新的类:动态的改变某个类的结构 ...
- 使用selenium时碰到的某一个坑
如图:
- 读《Wireshark网络分析就这么简单》读书笔记
晚上花了两个多小时看完这本书,记录下一些看书过程中的笔记. 一.问题:A和B 是否能正常通信? 两台服务器A和服务器B的网络配置 A ...
- ActiveReport报表更改连接字符串及参数
PageReport pr = new PageReport (new FileInfo("报表路径")); //报表路径如../Order/OrderSale.rdlx if(p ...
- HDU 5012 骰子旋转（DFS）
http://acm.hdu.edu.cn/showproblem.php?pid=5012 保存骰子的状态,然后用dfs或者bfs搜索 还是再讲一下dfs 我们的目标是找一个与b相同,且转次数最少的 ...
- 阿里巴巴国际站 网站和PC客户端都登录不了，其他电脑或手机可以
背景 昨天晚上,我还能打开阿里巴巴国际站,PC客户端也可以登录 今天早上起床打开电脑,发现国际站的网站打开不了,客户端也登录不了,提示了错误信息,但是其他电脑或手机就可以登录 原因分析 1.是不是本机 ...