CSS之响应式布局

响应式布局

外部link的max.css

#left {
    width: 50%;
    height: 100px;
    background-color: #FF6600;
    float: left;
}

#right {
    width: 50%;
    height: 100px;
    background-color: #3565ff;
    float: left;
}

外部link的min.css

#left {
    width: 100%;
    height: 100px;
    background-color: #FF6600;
}

#right {
    width: 100%;
    height: 100px;
    background-color: #3565ff;
}

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--第一种方法-->
    <!--<style>
        /*!*当设备宽度大于900的时候，采用该样式*!
        @media (min-width: 900px) {
        }
        !*当设备宽度小于900的时候，采用该样式*!
        @media (max-width: 900px) {
        }*/
    </style>-->

    <!--第二种方法-->
    <!--<style>
        @import url(../../css/max.css) all and (min-width:900px);
        @import url(../../css/min.css) all and (max-width:900px);
    </style>-->

    <!--第三种方法-->
    <link rel="stylesheet" href="../../css/max.css"
          media="all and (min-width:900px)">
    <link rel="stylesheet" href="../../css/min.css"
          media="all and (max-width:900px)">
    <title>响应式布局</title>
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>

运行图

时间： 2024-10-12 16:30:53

CSS之响应式布局的相关文章

css的响应式布局和动画

把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件越来越大,兼容难度越来越大,js也会很难写,于是他们离开了历史的舞台, 如今流行的还是手机端一份,pc端一份,pc用css适配实现,但是pc的屏幕大小也有很大的区别,于是响应式布局==从适配手机pc转移到了适配各种pc屏幕大小上==,这就是所有pc的css框架都会有的栅格系统 栅格系统原理 /* 超

css中响应式布局中样式的代码书写方法

代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ position: absolute; top: 18px !important; left: 18%; color: #000000; } } @media only screen and (min-width: 375px){ html { font-size: 10px !important; } .mu

利用media query写响应式布局

最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章. 简单记录一下用css写响应式布局的方法.大概可以这么理解,通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的. 首先先贴一个html,css都放在同级的css文件夹下面,因为有个简单的轮播,所以要引入jquery <!DOCTYPE html> <html>

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

Demo —— 响应式布局

响应式布局实例演示 What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过. 优点:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题. 缺点:兼容各种设备工作量大,效率低下:代码累赘,

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g

css响应式布局用法

1.使用内联样式的用法 在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式 <head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @m

CSS3的响应式布局Home / HTML/CSS / CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下: 主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 下面是CSS判断是PC端还是移动端其实很简单,用CSS3的媒体查询