自适应网页设计

Euphoria 发布于2019-08-29 11:26 / 1945人阅读

摘要：一允许网页宽度自动调整首先，在网页代码的头部，加入一行标签。四选择加载自适应网页设计的核心，就是引入的模块。参考自自适应网页设计基于等视区相对单位的响应式排版和布局

一、允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport标签。
　　

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

二、不使用绝对宽度，不使用绝对大小的字体

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。指定百分比宽度width: xx%或者width:XXem;
使用相对大小的字体em或者rem。一般浏览器的默认字体大小为16px。“em”是一个相对的大小，其参考物指的是相对于元素父元素的font-size。因此，1em总是等于父元素的字体大小。而rem总是相对于根元素的字体大小进行计算的。

1.设置百分比时的计算
相对于父元素宽度的：[max/min-]width、left、right、padding、margin 等；
相对于父元素高度的：[max/min-]height、top、bottom 等；
相对于继承字号的：font-size 等；
相对于自身字号的：line-height 等；
相对于自身宽高的：border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、filter 系列函数等；
如果自身设置 position: absolute，则相对于离它最近的那个 position 不为 static 的外层元素，如果没有这样的元素，则相对于窗口。
如果 position: fixed，“父元素”指视口。
margin如果没有加后缀是相对于宽，但是加了后缀，比如margin-left，则是相对于高；

2.设置em时的计算
元素自身没有设置字号大小时，则默认使用父元素字号大小。元素自身要是设置了字体大小后，则字体计算公式为：
需要转换的像素值/父元素的font-size=em值
元素的width、height、line-height、margin、padding、border等值转换总是以当前元素的字号大小计算：
需要转换的像素值/元素的font-size=em值
比如：


     
     

   
   
.outerdiv {
    font-size: 32px;
}

.innterdiv {
    width: 2em; /*64/32=2*/
    height: 2em;
    line-height: 2em;
    padding: 0.5em;
}

当innterdiv设置font-size的大小时

.innterdiv {
    font-size: 0.5em;/*16/32=0.5*/
    width: 2em;/*32/16=2*/
    height: 2em;
    line-height: 2em;
    padding: 0.5em;
}

三、使用流动布局

即各个区块的位置都是浮动的，不是固定不变的。当宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

四、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。设置断点时，最好以内容为基础设置，而不是以各种屏幕尺寸来设置。
　

@media screen and (max-width: 1200px) {
　　　　
　}
@media screen and (max-width: 780px) {
　　　　
　}

四、图片的自适应

使图片的宽度为100%,但是不超过最大宽度400px;

img { 
   width: 100%;
   max-width:400px;
}

大多数嵌入网页的视频也可这样写：img, object { max-width: 100%;}

五、font-size实现自适应

使用calc实现字体的自适应。比如要让屏幕宽度在 1553px-1032px 的范围内变化时，font-size大小是在12px-16px之间对应变化，则

font-size: calc(0.75em + 4*(100vw - 1032px) / 521);

vw 相对于视窗的宽度：视窗宽度是100vw。视窗宽度指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
0.75em可以换成百分比font-size: calc(75% + 4*(100vw - 1032px) / 521);
也可换成px单位font-size: calc(12px + 4*(100vw - 1032px) / 521);但是Safari浏览器不支持该写法。

参考自：
自适应网页设计（Responsive Web Design）
基于vw等viewport视区相对单位的响应式排版和布局

云服务器 GPU云服务器自适应网页设计 asp网页自适应 php 网页自适应自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111646.html

（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

rockswang 2019-08-20 14:45 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

dockerclub 2019-08-30 15:53 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

Ilikewhite 2019-08-01 16:24 评论0 收藏0
真的,移动端尺寸自适应与dpr无关

摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

omgdog 2019-08-22 18:19 评论0 收藏0
真的,移动端尺寸自适应与dpr无关

摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

617035918 2019-08-02 10:46 评论0 收藏0