前端样式布局

最新推荐文章于 2024-09-12 18:02:32 发布

青提柚柚

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量736

点赞数 20

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_41437448/article/details/136711285

版权

概念

响应式布局：根据屏幕大小自动适应布局

静态布局：所有元素都是静态的用px为单位

流式布局：一般按照宽度百分比来写,页面元素根据屏幕分辨率适配，整体布局不变，页面内的元素框大小会变化。缺点：文字大小是固定的px，如果屏幕变化太大，会显示不正常不协调（比如字占满框）

弹性布局：垂直水平按照比例分等布局，处理可用的空间。（伸缩盒子：主轴+交叉轴）

自适应布局：创建多个静态布局，特点是分别为不同的屏幕分辨率定义布局，每个静态布局对应一个屏幕分辨率范围。需要开发多套界面。通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。大小的话：框变字不变 响应式布局：只需要开发一套代码。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。元素位置和大小都会变化。

流式布局

定义：

1.容器或者盒子的宽度一般不写固定值，而是使用百分比

2.其余样式：字体、高度、margin、padding等按照设计稿上换算成一倍屏大小的固定尺寸标注

3.有些屏幕固定尺寸显示不美观的，使用@media来微调

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta的参数：

<meta name="format-detection" content="telephone=no"> //不识别有些数字格式为电话链接

响应式布局方式

定义：针对不同频幕尺寸设计不同的样式；媒体查询+流式布局+弹性布局

方式一：媒体查询

响应式布局：媒体查询+流式布局+弹性布局

媒体查询：查询有限，主要获取主流设备的宽高

流式布局：页面元素宽度设置百分比按照屏幕宽度进行调整，使得整体布局不变

媒体查询语法：

@media mediatype and |not |only(media feature){
css-code
}

eg.

@media screen and (max-width:2000px){

html:{

fontsize:12px

        }

  }

@media screen and (min-width:700px){

body:{

overflow-y:scroll

        }

  }

媒体查询缺点：在浏览器大小改变时，需要改变的样式太多，多套样式代码会很繁琐。

// -webkit-device-pixel-ratio:2 二倍屏的意思

方式二：百分比

padding margin:设置百分比相对于父元素的宽度设置百分比

border-radius：相对于自身的宽度设置百分比

子元素的top、bottom、left和right：则相对于直接非static定位（默认定位）的父元素的高度/宽度

方式三：vm/vh

vw : 视口宽度（viewport width）

1vw = 1 / 100 视口宽度

vh : 视口高度（viewport height）

1vh = 1 / 100 视口高度

vm和vh不要混用，否则盒子的宽高比会随着屏幕尺寸的变化发生变化

rem和vw/vh的区别：

rem:在当前市场上比较常见，那么他在使用过程中，需要不断的去修改html的字体大小；需要使用到媒体查询；需要引入flexible.js文件；
vw/vh：未来市场要用到的，省去了各种判断和修改，不需要再另外做适配。

方式四：rem和flexible.js

需要设置根元素字体大小

cssrem.rootFondize:屏幕宽度px/10

比如：根字体大小为16px，那么css想要设置为32px时，对应的rem转换为2rem；

或者在html下设置fontsize:16px,表示1rem = 16px

flexible.js

概念：

1.是手淘开发出的一个用来适配移动端的js框架

2.核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了

用法：

1.github下载flexible.js代码之后，把index.js复制到项目里面

2.在主html页面，使用script标签引入这个index.js文件

3.安装cssrem插件，setting.json中修改cssrem中默认的字体大小（cssrem.rootFontSize）

4.保存之后，css文件书写px的时候就会有自动计算出的rem提示，供你转化

现在有个laoder插件可以在打包的时候直接实现px转化为rem：postcss-plugin-px2rem

一、拿到UI设计稿

二、在html中设定fontsize值

三、页面样式编写，完全按照设计稿的来换算 px换成rem；盒子的外层宽度margin等也要换算成rem，不同的设计稿大小可以计算出比例来换算
function(){
    // 假设参考的设计稿宽度是640 这时候默认设置1rem=100px为参照标准
    var desW = 640
    winW = document.documentElement.clientWidth
    // 计算出实际的屏幕宽度和模版宽度的比
    ratio = winW/desW

    // 设置如果屏幕比设计稿宽度款 则显示设计稿的宽度，则剧中显示，多余的两侧留白
    var 0Main = document.getElementById('main')
    if(winW>desW){
        oMain.style.width = desW + 'px'
        oMain.style.margin = '0 auto'
        return
    }

    // 如果屏幕比设计稿小 按照设计稿与屏幕的差值等比例缩小
    document.documentElement.style.fontSize = ratio *100+'px'
}()
四、识别不同的设备跳转访问不同的链接返回不同html页面