媒介
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
简单工作简单做-宽度自适应
所谓宽度自适应严格来说是一种PC端的自适应构造方法在移动端的延长。在处理PC端的前端界面时刻须要用到全屏构造时采取的就是此种构造方法。它的实现方法也比较简单，将外层容器元素按照百分比铺满处所式，琅绫擎的子元素固定或者阁下浮动。
- .div {
- width:100%; height:100px;
- }
- .child {
- float: left;
- }
- .child {
- float:right;
- }
因为父级元素采取百分比的构造方法，跟着屏幕的拉伸，它的宽度会无穷的拉伸。而子元素因为采取了浮动，那么它们的地位也会固定在两端。该宽度自适应在新的时代有了新的办法，跟着弹性构造的普及，它经常被flex或者box如许的伸缩性构造方法替代，变得越来越“弹性”实足。须要懂得弹性构造，请前去Flex构造教程和卤煮box构造教程比较。
大年夜小之辨-完全自适应
REM属性指的是相对于根元素设置某个元素的字体大年夜小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。
- html {
- font-size: 10px;
- }
- div {
- font-size: 1rem;
- height: 2rem;
- width: 3rem;
- border: .1rem solid #000;
- }
采取以上写法，div持续到了html节点的font-size，为本身定义了一系列样式属性，此时1em计算为10px，即根节点的font-size值。所以，这时div的高度就是20px，宽度是30px，边框是1px，字体大年夜小则是10px;一旦有了如许的办法，我们天然可以根据不合的屏幕宽度设置不合的根节点字体大年夜小。假设我们如今设计的标准是iphone5s，iphone5系列的屏幕分辨率是640。为了同一规范，我们将iphone5 分辨率下的根元素font-size设置为100px;
特别解释：在开端这一切之前，请开辟移动界面的工程师们在头部加高低面这条meta:
- <!--iphone5-->
- html {
- font-size: 100px;
- }
那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根元素字体大年夜小:
一般的情况下，你是不须要推敲屏幕犊飕地拉伸和紧缩。当然，假如用户开启了转屏设置，在网页加载之后改变了屏幕的宽度，那么我们就要推敲这个问题了。解决此问题也很简单，监听屏幕的变更就可以做到动态切换元素样式:
网友点评
精彩导读
科技快报
品牌展示