css自适应布局（css 嵌套绝对定位图片如何实现自适应布局）

本文目录

• css 嵌套绝对定位图片如何实现自适应布局
• css3怎么实现屏幕自适应
• 如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局
• 自适应(弹性)宽度CSS版式布局 和 固定宽度CSS版式布局有什么区别
• 如何使用 CSS 网格创建自适应布局
• 如何添加CSS让页面自适应手机屏幕
• 如何用纯CSS实现自适应布局表格
• css怎么自适应宽度

css 嵌套绝对定位图片如何实现自适应布局

一、float实现

html结构：

[html] view plain copy

• 《div class=“left“》《/div》  

• 《div class=“right“》《/div》  

• 《div class=“center“》《/div》  

• css：

[css] view plain copy

• .left,.right{  

• width: 200px;  

• height: 300px;  

• background-color: red;  

• }  

• .left{  

• float: left;  

• }  

• .right{  

• float: right;  

• }  

• .center{  

• margin: 0 210px;  

• height: 300px;  

• background-color: blue;  

• }  

• 这种实现受外界影响小，但是对html结构有要求（center必须放在最后，left与right则无所谓），当界面缩小到一定程度时，right会被挤到下一行

二、position实现

html结构：

[html] view plain copy

• 《div class=“left“》《/div》  

• 《div class=“right“》《/div》  

• 《div class=“center“》《/div》  

css：

[css] view plain copy

• .left,.right{  

• position: absolute;  

• width: 200px;  

• height: 300px;  

• background-color: yellow;  

• }  

• .left{  

• left: 0;  

• }  

• .right{  

• right: 0;  

• }  

• .center{  

• margin: 0 210px;  

• height: 300px;  

• background-color: blue;  

• }  

该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生重叠。

css3怎么实现屏幕自适应

　　试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
　　1、DIV+CSS小案例描述
　　根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现图片的自由缩放；

HTML代码如下：且仔细看清每一行的注释：

2、看下实现的效果如何：文字大小是如何变化的；

变化浏览器后效果：如图

自定义缩放其实主要就是判断浏览器的宽度，高度需要的话可以设置，还有设置内部区域块儿的宽度以及图片展示用百分比来控制；

如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局

通过绝对定位实现
See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下：
需要套一个“positioned”的父元素 div-a 绝对定位，并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度（因为 div-a 绝对定位已经脱离文档流，故不设定为 div-a 宽度的话，会相互覆盖） div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100%
2. 通过浮动实现
See the Pen float-two-column by xal821792703 (@honoka) on CodePen.
注意点如下：
div-a 设定为左浮动 div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度，原因同上，浮动也会脱离文档流 div-c 最好清除浮动，避免浮动的影响
3. 通过 BFC 规则实现

自适应(弹性)宽度CSS版式布局 和 固定宽度CSS版式布局有什么区别

自适应一般用百分比或em来做宽度单位，开发难度比固定宽度大。比如有个导航条，用固定宽度宽1200px，那么你去手机上看，由于屏幕宽度不够，有两个选择：

1. 出现横向滚动条，要浏览者左右滑动
   

2. 整个页面缩放到宽度和手机分辨率一样，那么，文字、链接什么的也缩小到了阅读点击困难的尺寸，需要不停放大页面和缩小页面来观看

然后用自适应来做这个导航条，总宽度设为100%，里面有5个按钮，每个宽度设为20%，它就会根据屏幕尺寸缩放，再用css媒体查询去判断，当宽度太小时，5个按钮就不再横着一排，而变成竖着排列，或再复杂点加上js，让整个导航栏变成一个菜单按钮，按了再弹出5个链接按钮。

那么，导航栏可以这样控制，页面其他内容也可以这样控制，于是你同一个页面在电脑、平板、手机上看，都可以有不同的版式来适合当前设备。

你可以百度下css媒体查询、自适应布局方面的教程看看，另外：记住百分比是用在宽度上，高度上你还是忘了百分比吧。

如何使用 CSS 网格创建自适应布局

由于格网局使布能你够元素将列和按行齐对，但没内有结构，容因此还支它持HTML 或级样联式 表(CS) 表S格法无现的实方—案如本文中介绍—的案方此。外，过将网通格布局媒与体询结查合使，用以使布可无缝局适应设地备外形寸、方尺向可用空、等因间的变素。 C化S 网格S布规范局前是一个万当网联维会 合W(3)C工 草作案并， 在Itenren txEpoler r10中 供应以前商的缀式形得部到分持。支关有支的持性属完的列整表，请见 参SDM 上N网的布格局因为。网布局规格范处仍开发于阶，所以 In段trente xpEolrr e01 中支的持可能与规中范计设的持支完不对全应。

如何添加CSS让页面自适应手机屏幕

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。


首先，在网页代码的头部，加入一行viewport标签
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no“ /》
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。


其次：网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto;


第三，流动布局
.left{
float: left;
width: ***%;
}
第四，选择加载css

这是自适应的关键部分



.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px}  
} 
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
 
@media screen and (max-width: 1200px) { 
.abc {width: 900px}  
} 
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
 
@media screen and (max-width: 901px) { 
.abc {width: 200px;}  
} 
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
 
@media screen and (max-width: 500px) { 
.abc {width: 100px;}  
} 
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。


第四，图片自适应
img { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：img { width: 100%; }


筚五、采用相对字体大小
字体也不能使用绝对大小（px），而只能使用相对大小（em）。


这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！

如何用纯CSS实现自适应布局表格

 /*屏幕宽度小于600px时触发*/
        @media screen and (max-width: 600px){ 
            table{
                 border:0
            }

            table thead{
                 display: none;
            }

            table tr{
                margin-bottom: 10px;
                display: block;/*设置成块级元素实现换行*/
                border-bottom: 2px solid #ddd;
            }

            table td{ 
                display: block;
                text-align: right;
                font-size: 13px;
                border-bottom: 1px dotted #ccc;
            }

            table td:last-child{
                border-bottom: 0;
            }

            table td:before{/*模拟标题的效果*/
                content:attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }
        }

css怎么自适应宽度

css自适应宽度有2种方式：
1.是通过百分比来控制宽度；
2.可以通过块状元素自动占满父级的宽度的特性来实现
PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。