响应式设计
　　.在不同设备上正常使用
　　.一般主要处理屏幕大小问题
　　.主要方法：
　　　　.隐藏 ＋ 折行 ＋ 自适应空间
　　　　.rem/viewport/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;

　　　　　　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>

这个案例就是折行的方式自适应。但是我们注意到另外一个问题，就是屏幕大小不管多大，我们的文字和圆圈都是那么大，当屏幕小的时候，会挤压空白区域，文字和圈圈的占比就会变大。可不可以采用等比例的方式呢。这种是可以的。

首先一种是media query。比如demo1，已经讲过了
另外一种就是改变viewport的值。width=320。这样iphone5就是320。其它的都以320为基准。比如切到iphone6就放大了。
第三种使用rem的方式
<!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布局

第四种js计算

css布局－响应式布局的更多相关文章

  1. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  2. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  3. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  4. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  5. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  6. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  7. CSS的响应式布局

    响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...

  8. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  9. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...

  10. Css布局 响应式布局介绍

    1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...

随机推荐

  1. $bzoj1007-HAOI2008$ 水平可见直线 下凸包

    题面描述 在\(xOy\)直角坐标平面上有\(n\)条直线\(L_1,L_2,...,L_n\),若在\(y\)值为正无穷大处往下看,能见到\(L_i\)的某个子线段,则称\(L_i\)为可见的,否则 ...

  2. python 管理多版本之pyenv

    一, [root@management ~]# pyenv install -listAvailable versions:  3.3.0  3.3.1  3.3.2  3.3.3  3.3.4  3 ...

  3. Oracle 角色及其权限

    一.简介 Oracle权限分为系统权限和对象权限. 1.系统权限 注意:系统权限不支持级联回收,所以你需要使用sysdba一个个的回收. 2.对象权限 注:对象权限支持级联回收,系统权限不支持级联回收 ...

  4. hibernate框架配置文件详解

    1 orm元数据配置文件(映射文件) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hib ...

  5. android应用签名详解

    1.Eclipse工程中右键工程,弹出选项中选择 android工具-生成签名应用包: 2.选择需要打包的android项目工程: 3.如果已有私钥文件,选择私钥文件 输入密码,如果没有私钥文件见 第 ...

  6. 腾讯云CDB的AI技术实践：CDBTune

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:邢家树,高级工程师,目前就职于腾讯TEG基础架构部数据库团队.腾讯数据库技术团队维护MySQL内核分支TXSQL,100%兼容原生My ...

  7. SpringBoot 之 打war包

    1.修改打包方式为 war <packaging>war</packaging> 2. 修改tomcat 依赖 <dependency> <groupId&g ...

  8. 【Linux相识相知】文本处理工具之grep\egrep\fgrep及正则表达式

    常说Linux上有文本处理的三剑客,grep.sed和awk,本文就grep做出详细的描述,并引出正则表达式. grep NAME:打印模式匹配的行 SYNOPISIS: grep [OPTIONS] ...

  9. 自己实现C++的string类

    使用C++的朋友对string类都不会陌生,string类使用起来很是方便,比C的字符数组好用多了,但是我们能不能自己实现一个属于自己的string类呢? 实现一个具有基本功能的string类并不难, ...

  10. python爬虫学习（一）

    #简单例子:抓取网页全部内容后,根据正则表达式,获取符合条件的字符串列表from urllib import request#正则表达式import re url = "http://www ...