自适应相关知识点1

1—百分比

百分比是相对于父元素的。利用百分比可以将浏览器尺寸和元素尺寸联系起来,从而实现自适应。

2—auto

auto为由浏览器自动计算。块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于width。使用auto属性在父元素宽度变化时,该元素的宽度也会随着变化。当该元素设置为浮动时,width就成了内容的宽度了,由内容撑开,即有了包裹性。overflow|position:absolute| float:left/right、替换元素;都会产生包裹性。在具有包裹性的元素上width:auto;是不能实现让元素自适应浏览器宽的。

3--移动端rem实现自适应

http://caibaojian.com/rem-responsive-2.html

http://caibaojian.com/web-app-rem.html

自适应:在不同分辨率不同设备上显示的效果一样

待研究。。。。

4—margin负值法

等一下我。。。。。。

5—浮动

等一下我。。。。。。

eg.

<style type="text/css">
        .main{
          width:100%;
          background-color: bisque;
        }
        .clearfix:after{
            content:"";
            clear:both;
            display:block;
            height:0;
        }
        .left{
            width:200px;
            background-color: #056FD3;
            height:100px;
            float:left;
        }
        .right{
            width:200px;
            background-color: #74DEF8;
            height:100px;
            float:right;
        }
        .center{
            height:100px;
            background-color: blueviolet;
        }
        .footer{
            width:100%;
            height:300px;
            background-color: gold;
        }
    </style>
<div class="main clearfix">
    <div class="left">assa</div>
    <div class="right">asx</div>
    <div class="center">qsa</div>
</div>
<div class="footer">addf</div>

参考:

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

http://www.cnblogs.com/qieguo/p/5421252.html

http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/

未完待续=>

时间: 2024-09-27 15:02:38

自适应相关知识点1的相关文章

垂直搜索的相关知识点总结

垂直搜索引擎大体上需要以下技术 1.Spider 2.网页结构化信息抽取技术或元数据采集技术 3.分词.索引 4.其他信息处理技术 垂直搜索引擎的技术评估应从以下几点来判断 1.全面性 2.更新性 3.准确性 4.功能性 垂直搜索的进入门槛很低,但是竞争的门槛很高.没有专注的精神和精湛的技术是不行的.行业门户网站具备行业优势但他们又是没有技术优势的,绝对不要想像着招几个人就可以搞定垂直搜索的全部技术,作为一个需要持续改进可运营的产品而不是一个项目来说对技术的把握控制程度又是垂直搜索成功的重要因素

博客6:磁盘以及创建文件系统的相关知识点

1.linux磁盘的相关知识点  (1)I/O ports:I/O设备地址,实质上是一个缓冲器  (2)块设备:Block,存取单位是"块",例如:磁盘  (3)字符设备:char,存取单位是"字符",例如:键盘  (4)设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信(仅有元数据,而无数据)  (5)设备号码:              主设备号:major number,表示设备类型              次设备号:minor number

图像处理程序框架—MFC相关知识点

CDC:Windows使用与设备无关的图形设备环境(DC :Device Context) 进行显示 . MFC基础类库定义了设备环境对象类----CDC类.CDC与CGdiObject的关系 说道CDC类就不能不提一下GdiObject---图形对象类. 在Windows应用程序中,设备环境与图形对象共同工作,协同完成绘图显示工作.就像画家绘画一样,设备环境好比是画家的画布,图形对象好比是画家的画笔.用画笔在画布上绘画,不同的画笔将画出不同的画来.选择合适的图形对象和绘图对象,才能按照要求完成

libgdx相关知识点

Gdx.graphics.setContinuousRendering(false); 设置图像为非连续自动渲染. libgdx相关知识点,布布扣,bubuko.com

Android开发涉及有点概念&amp;相关知识点(待写)

前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由于Android是基于Linux,而Linux又是用c山寨Unix的,但是为什么Android不用开发App,其实我也不懂,我想可能是java比较简单. 同样的,IOS为啥没用java,这个我也想可能是因为IOS是封闭的吧..晕,又废话了..好,开始吧,不过这次很多要查资料了,很多名词.单词不会啊! 首先还

&lt;c:url&gt;标签相关知识点

一. <c:url>标签的作用主要用来产生字符串类型的url,而不是产生一个超链接,注意url(统一资源定位符)与超链接两个含义的区别. <c:url value="http://www.baidu.com" />在JSP页面中的输出形式如下: 可以看出来这在页面中就是个字符串,不是一个能点击的超链接. --------------------------------------------------------------------------------

学习记录013-NFS相关知识点

一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -arv 可以通过加载配置生效,也可以通过命令直接共享目录,越过/etc/exports,但是重启失效/usr/sbin/showmount 常用来在客户端,查看NFS配置及挂载结果的命令/var/lib/nfs/etab NFS配置文件的完整参数设定的文件注意:如果需要读写共享,一定要让本地目录被NF

Python开发一个csv比较功能相关知识点汇总及demo

Python 2.7 doc demo: # -*- coding: utf-8 -*- import csv with open('eggs.csv', 'wb') as csvfile: spamwriter = csv.writer(csvfile, delimiter=' ', quotechar='|', quoting=csv.QUOTE_MINIMAL) spamwriter.writerow(['Spam'] * 5 + ['Baked Beans']) spamwriter.w

UITableView相关知识点

//*****UITableView相关知识点*****// 1 #import "ViewController.h" 2 3 // step1 要实现UITableViewDataSource协议,因为tableView不存储数据 4 @interface ViewController () <UITableViewDataSource, UITableViewDelegate> 5 6 // step0 准备要显示的数据 7 @property(nonatomic,st