css响应式布局原理

  • 移动设备优先： 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  • 媒体标签： 
    @media screen and (min-width: 100px){
    div{
        width: 100px;
        height: 1000px;
        background: yellow;
    }
}
  • 完整代码： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
@media screen and (min-width: 100px){
    div{
        width: 100px;
        height: 1000px;
        background: yellow;
    }
}
@media screen and (min-width: 500px){
    div{
        width: 500px;
        height: 1000px;
        background: blue;
    }
}
@media screen and (min-width: 800px){
    div{
        width: 800px;
        height: 1000px;
        background: black;
    }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
  • 效果：


    • 原文地址：http://blog.51cto.com/12173069/2106387

    时间： 2024-10-21 16:01:07

    css响应式布局原理的相关文章

    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

    bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解释:Bootstrap提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列. 栅格系统的工作原理: 1.行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(

    深度剖析响应式布局原理和方法

    首先是META标签 <mate name="viewport" content="width=device-width, initial-scale=1"/> 这是一个方法,meta是一个插入标签 名字等于内容名字,宽度等于设备宽度放大倍数默认是一 第二个是百分比布局. 百分比布局上的原理是尽量不要使用px使用百分比字体使用rem and em 其实百分比布局的优势就是代码傻少跨平台比较多,缺点就是用百分比布局的时候把一些布局的盒子套盒子套的较多百分比数

    css响应式布局 兼容ie6

    1.两栏布局  左侧定宽   右侧自适应 <div class="grid1">     <div class="left_1">左侧定宽</div>     <div class="right_1">右侧自适应</div> </div> .left_1{float:left; width:200px;} .right_1{margin-left:200px;} 2.两栏布局

    CSS响应式布局实例

    <style type="text/css">        body{            margin:0 auto;            min-width:1366px;        }        a{            text-decoration:none;            color:black;        }        a:hover{            color:orange;        }        a:vis

    学习制作一个简易博客,知识应用: html css 响应式布局

    css响应式布局

    以设计稿为准,假设设计稿竖屏宽度为750px,取根元素的font-size为50px 在iphone6(375px)下,deviceWidth=7.5rem, 这个就是viewPort中的deviceWidth, 所以fontsize计算公式为 font-size=deviceWidth/7.5 即50px,因此我们可以设置iphone6下 html的font-size为312.5% 在该尺寸下的设备上,如果要设置某个p元素的字体大小为18px,可以设置成0.36rem 在iphone5s 32

    css的响应式布局和动画

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