css自适应手机，pc方案

傷城~ 2022-05-12 06:54 226阅读 0赞

这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制

使用自适应方案的前提：替换原有的网站位置控制思维

网址控制：

1. float /right

2. margin-\*/pading-\*

3. position:relative......

4. 100px , 20px.....

自适应思维：

1.抛弃上面四点的使用，改用坐标轴思维，这是从react中体会来的

2.用好display + %、rem + text-aligin、vertical-aligin 便可实现大多数自适应

3.父子关系控制思维

首先将父元素声明为单元格系统

display: table-cell;

这里以保证上下左右居中为例：给父元素添加 vertical-align: middle;       text-align: center;

还有需要为最外层设置width ,这里的width需要一个px值，这样内嵌元素获取百分比才会有效，总结width就是，最外层设置px,最内部元素设置%

注意每一个相对父级都要添加display: table-cell,这是内部元素实现自适应的前提，实例代码如下

<div class="mui-content" style="background: transparent;width: 100%;text-align: center;">  
                        <div style="display: table-cell;vertical-align: middle;text-align: center;display:inline;width: 100%;">  
                        <div  style="display: table-cell;padding: 1rem;">  
                            <div  style="display: table-cell;vertical-align: middle;text-align: center;width: 100px;height: 100px;border: 1px solid red;">  
                                <img src="../../images/add.png" style="width:5rem;">  
                            </div>  
                            <button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="width: 8rem;height: 4rem;background: \#03F;display: inline-block;">你的图标</button>  
                        </div>  
                         
                        <div  style="display: table-cell;padding: 1rem;">  
                            <div  style="display: table-cell;vertical-align: middle;text-align: center;width: 100px;height: 100px;border: 1px solid red;">  
                                <img src="../../images/add.png" style="width:5rem;">  
                            </div>  
                            <button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="width: 8rem;height: 4rem;background: \#03F;display: inline-block;">对方图标</button>  
                        </div>  
                        </div>  
                          
                  
                  
                      
            
            </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 css自适应布局

侧固定，右侧自适应 <!--flex和box是两种不同的自适应布局方式，功能类似，但写法不同，flex的兼容性更高以下布局优先使用box布局（...

心已赠人/ 2024年04月17日 05:51/ 0 赞/ 67 阅读

相关 CSS图片自适应框架

CSS图片自适应框架 ![在这里插入图片描述][20210326100534470.gif] 使用img来设置 <!DOCTYPE html> <

旧城等待，/ 2022年11月13日 06:24/ 0 赞/ 260 阅读

相关 CSS自适应

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 随着3G的普及，越来越多的人使用手机上网。

迷南。/ 2022年10月02日 00:58/ 0 赞/ 271 阅读

相关 CSS自适应布局

什么是布局，其实就是用定位和尺寸相关的属性来完成布局，布局会用到的有：普通流、浮动、绝对定位三种定位机制，CSS3中的transform、flex等先来说float浮动，现

朱雀/ 2022年07月12日 12:22/ 0 赞/ 314 阅读

相关 css 布局自适应

css布局自适应布局一般就是左右2栏目(其中一栏固定一栏自适应) 左中右3栏(一般中间自适应) 2栏目左边固定右边自适应外

Love The Way You Lie/ 2022年06月10日 11:42/ 0 赞/ 368 阅读

相关 css自适应手机，pc方案

这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制使用自适应方案的前提：替换原有的网站位置控制思维网址控制： 1. float /righ

傷城~/ 2022年05月12日 06:54/ 0 赞/ 227 阅读

相关 CSS3媒体查询+手机自适应

媒体查询媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。媒体查询的条件写法，可以从小到大，也可以从大到小，也可以

谁借莪１个温暖的怀抱￠/ 2022年04月04日 07:00/ 0 赞/ 509 阅读

相关 CSS实现自适应菜单

CSS实现自适应左侧菜单先看效果图菜单需要的数据结构实现代码js(react) css部分总结先看效果图 !

妖狐艹你老母/ 2022年04月01日 03:10/ 0 赞/ 437 阅读

相关 rem自适应手机端布局

通过js根据屏幕设备尺寸的大小，改变根元素的值： <script> var html = document.querySelector("html"); v

比眉伴天荒/ 2022年01月07日 15:05/ 0 赞/ 355 阅读

相关手机web——自适应网页设计（html/css控制）

转自：[http://mobile.51cto.com/ahot-409516.htm][http_mobile.51cto.com_ahot-409516.htm]

淡淡的烟草味﹌/ 2021年06月24日 14:35/ 0 赞/ 479 阅读