响应式布局-实现方式01

Posted 2022-08-04 JackieDYH

响应式布局的实现

响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。

媒体查询

通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

使用link链接

<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" type="text/css" href="example.css" media="all and (max-width:600px)"/>

响应式布局的实现

Meta标签定义

使用viewport meta标签在手机上控制布局

隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像是电话号码的数字添加链接，需要关闭

<meta name="format-detection content="telephone=no" />

实现响应式布局

通过媒体查询

@media screen and (max-width:320px)   
@media screen and (min-width:320px) and (max-width:640px)  
样式表也可以引入外部的
@import url("css/demo.css") screen and (min-width:320px) and (max-width:640px);
@media screen and (min-width:640px)  

当然，工作中是使用的外部样式表

<link rel="stylesheet" type="text/css" href="a.css"  media="screen and (min-width: 1000px)">

<link rel="stylesheet" type="text/css" href="b.css"  media="screen and (min-width: 600px) and (max-width: 1000px)">

<link rel="stylesheet" type="text/css" href="c.css"   media="screen and (max-width: 600px)">

也许，你需要让手机的屏幕横着，比如你在玩王者荣耀

竖屏- 屏幕宽度小于高度
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏-屏幕宽度大于高度
<link rel="stylesheet" media="all and (orientation:landscape)" href="portrait.css">

响应式布局缺点和优点

• 优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。
• 缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

这里有一个很严重的缺点

由于PC端和移动终端访问的是同一个网站，PC端可以不计较流量限制，但是移动端不可能不计较。

这里主要是针对于图片的使用，为适配不同终端机型的屏幕宽度和像素密度，我们一般会使用如下方法设置图片的CSS样式：

<style>
    img
        max-width:100%;
        height:auto;
    
</style>

将图片的最大宽度设置为100%，以确保图像不会超出其父级元素的宽度，如果父级元素的宽度发生改变，图片的宽度也随之改变，height：auto 可以确保图片的宽度发生改变时，图片的高度会依据自身的宽高比例进行缩放。 这样当我们在移动设备上访问响应式网页里的图片时，只是把图片的分辨率做了缩放，下载的还是PC端的那张大图，这样不仅浪费流量，而且浪费带宽，而且会拖慢网页的打开速度，严重影响用户的使用体验。

解决方案：<picture>

如下栗子中针对不同屏幕宽度加载不同的图片；当页面宽度 在320px到640px之间时加载minpic.png；当页面宽度大于640px时加载middle.png

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

如下例子中添加了屏幕的方向作为条件；当屏幕方向为横屏方向时加载_landscape.png结尾的图片；当屏幕方向为竖屏方向时加载 _portrait.png结尾的图片；

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

直接在CSS中使用

<!--
@media mediatype and|not|only (media feature)
    /* css样式 */

-->
<div id="t1"></div>
<style type="text/css">
    @media screen and (min-width:600px) 
        #t1
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        
    
    @media screen and (max-width:600px)  
        #t1
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        
    
</style>

使用@import导入

/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);

媒体类型

• all: 用于所有设备。
• print: 用于打印机和打印预览。
• screen: 用于电脑屏幕，平板电脑，智能手机等。
• speech: 应用于屏幕阅读器等发声设备。

逻辑操作符

• and: 表示且，当所有的条件满足的时候返回true。
• not: 是用来排除某种制定的媒体类型。
• only: 用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
• ,: 逗号用于将多个媒体查询合并为一个规则，逗号分隔效果等同于or逻辑操作符。

媒体功能

• aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的比率。
• color: 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。
• color-index: 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0。
• device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的比率。
• device-height: 定义输出设备的屏幕可见高度。
• device-width: 定义输出设备的屏幕可见宽度。
• grid: 用来查询输出设备是否使用栅格或点阵。
• height: 定义输出设备中的页面可见区域高度。
• max-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-color: 定义输出设备每一组彩色原件的最大个数。
• max-color-index: 定义在输出设备的彩色查询表中的最大条目数。
• max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-device-height: 定义输出设备的屏幕可见的最大高度。
• max-device-width: 定义输出设备的屏幕最大可见宽度。
• max-height: 定义输出设备中的页面最大可见区域高度。
• max-monochrome: 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
• max-resolution: 定义设备的最大分辨率。
• max-width: 定义输出设备中的页面最大可见区域宽度。
• min-aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的最小比率。
• min-color: 定义输出设备每一组彩色原件的最小个数。
• min-color-index: 定义在输出设备的彩色查询表中的最小条目数。
• min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。
• min-device-width: 定义输出设备的屏幕最小可见宽度。
• min-device-height: 定义输出设备的屏幕的最小可见高度。
• min-height: 定义输出设备中的页面最小可见区域高度。
• min-monochrome: 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
• min-resolution: 定义设备的最小分辨率。
• min-width: 定义输出设备中的页面最小可见区域宽度。
• monochrome: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0。
• orientation: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
• resolution: 定义设备的分辨率。
• scan: 定义电视类设备的扫描工序。
• width: 定义输出设备中的页面可见区域宽度。

单位

百分比单位

当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。

• 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
• 子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。
• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。
• 设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。

em单位

em是相对长度单位，相对于当前对象内文本的字体尺寸，若未设置则相对于浏览器默认字体尺寸16px，em是会继承父元素的字体的尺寸，使用时需要重新计算子元素的em值避免1.2*1.2=1.44的现象，使用em可以使元素根据字体大小的动态调整来制作响应式布局。

rem单位

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变根元素的font-size即可。

vh vw vmin vmax

• vh: 相对于视窗的高度，1vh等于视窗高度的1%。
• vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。
• vmin: vw和vh中的较小值。
• vmax: vw和vh中的较大值。

缩放比例

通过动态地控制网页视图的缩放比例来制作响应式布局。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

自适应布局

自适应布局一般是通过检测User-Agent来判断当前访问的设备是PC端还是平板或者是手机，或者是通过检测窗口分辨率而请求服务器，从而服务端重定向或者返回不同的页面，需要开发多个页面来适应不同的设备，通常自适应布局与响应式布局并不是单独使用的，可以通过开发一套PC端页面与一套移动端页面来实现自适应布局，而两套页面都实现对于不同范围分辨率的响应式布局，可以避免过大的CSS样式表又可以获得较好的浏览体验，