移动终端适配摘要

至于昨天的文章，我将讨论iPad的改编. iPad可能与手机不同. iPad接近PC浏览器的分辨率，因此基本上不需要修改字体. ，最重要的是要适应宽度和高度问题

此属性只能适应宽度，并且某些列的宽度是固定的. 可以使用calc（）计算剩余的宽度设置，然后设置width属性

calc是英文单词calculate的缩写. 它是css3的新功能，用于指定元素的长度. 例如，您可以使用calc（）为元素的边框，边距，填充，字体大小和宽度属性设置动态值. 为什么是动态值？因为我们使用表达式来获取值. 但是calc（）的最大优点是可以用于流体布局，并且元素的宽度可以通过calc（）来计算.

calc（）允许您对元素进行计算. 您可以使用百分比，em，px和rem的单位值来计算div元素的宽度或高度，例如，“ width: calc（50％+ 2em）”，这样我们就不需要考虑元素DIV的宽度，但让浏览器计算任务.

calc（）的语法非常简单，可以用数学表达式表示，就像我们在学习加法（+），减法（-）calc 移动端兼容性，乘法（*）和除法（/）时一样孩子，如下:

.elm {
    width: calc(expression);
}

calc（）使用一般的数学运算规则，但还提供更多智能功能:

1. 使用四个操作“ +”，“-”，“ *”和“ /”；

2. 可以使用百分比，px，em和rem等单位；

3. 可以混合使用各种单位进行计算；

4. 如果表达式中有“ +”和“-”calc 移动端兼容性，则前后必须有空格，例如“ widht: calc（12％+ 5em）”，没有空格是错误的；

5. 表达式中有“ *”和“ /”时，前后不能有空格，但建议保留空格.

该浏览器与calc（）的兼容性还可以，并且在IE9 +，FF4.0 +，Chrome19 +，Safari6 +中得到了很好的支持，但是在撰写本文时，我们仍然需要在其前面添加各种浏览器process制造商的标识符，但不幸的是，移动浏览器尚未很好地兼容，仅支持“ Firefox 14.0 Android版”.

视口单位

什么是视口？

在桌面侧，视口是指桌面侧，指的是浏览器的可视区域;在移动端，它涉及三个视口: 布局视口（布局视口），视觉视口（视觉视口），理想视口（理想视口）.

视口单元中的“视口”，桌面侧指浏览器的可见区域；移动侧是指视口中的“布局”视口，“视口”是指浏览器内的可见区域. 大小，即window.innerWidth / window.innerHeight的大小，不包括浏览器的大小任务栏标题栏和底部工具栏的区域.

根据CSS3规范，视口单位主要包括以下4个:

1.vw: 1vw等于视口宽度的1％.

2.vh: 1vh等于视口高度的1％.

3.vmin: 选择vw和vh中的最小值.

4.vmax: 在vw和vh中选择最大的一个.

vh和vw: 相对于视口的高度和宽度，而不是父元素（CSS百分比相对于包含视口的最近父元素的高度和宽度）. 1vh等于视口高度的1 / 100，1vw等于视口宽度的1/100.

例如: 浏览器的高度为950px，宽度为1920px，1 vh = 950px / 100 = 9.5 px，1vw = 1920px / 100 = 19.2 px.

vmax相对于视口的宽度或高度中的较大者. 最大的一个被分成100个单位的vmax.

vmin是视口的宽度或高度中的较小者. 最小的一个分为100个单位的vmin.

vh / vw和％之间的差异

blog.csdn.net

姐姐告诉我有关设计草案的标准的信息，该标准通常基于iphone6、7、8、9等设计草案，为什么不使用Android？因为有太多的Android标准和太多的型号，所以您只能找到那些经常采用的标准，即与Android，iPhone和ipad兼容的标准.

姐姐也发送了一个链接，让我了解这些标准网站

iPhone分辨率终极指南

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-187144-1.html