rem布局实现静态页面之适配方案1

这部分内容是最近重新复习移动端,做页面时的笔记,这是发布的第一篇关于rem布局实现。内容大致分为页面实现过程中的重新复习到的不确信内容和未掌握内容，和在页面实现中出现的问题和解决。

技术选型

方案:采用单页面设计

技术:rem,媒体查询,less

设计图:750px

内容整理：

*创建common.less是为了供所有页面使用其中样式

*在less文件中引入less文件的方法是 在index.less中引入common.less @import 'common'

*@import&link

@import是由css提供，只有在ie5以上才能被识别，引用的css会在页面加载完后才会加载引用的css；可以将一个样式文件导入另一个样式文件里 @import '文件名'

link属于html标签，页面加载的时候会被同时加载，不存在浏览器兼容问题，引入样式的权重大于@import，link是把一个样式文件引入带html页面里去

flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

display:flex;不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的的属性

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间 。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

input type类型

text,password,密码框,radio单选框,checkbox复选框,

button按钮,file上传文件,image提交式图片,submit/reset提交/重置按钮

outline:点击input时会出现一圈的蓝色边框

outline:none;去除就不显示了

因为box-sizing盒子默认为content-box

在input中想要使用padding调整文字显示的位置时使用padding会变大盒子,影响后面的布局,所以只有把box-sizing:border-box;写上去就可以解决这个问题

判断一部分需不需要设置宽高来适应页面变化

你直接在没有任何设置的情况下调整页面窗口大小,发现内容偏离或者显示不全,那就是需要设置固定宽高才能适应页面变化,采用rem控制.

父级边框塌陷的原因

父级是没有样式的div/ul等块级元素;父级盒子内部只有浮动元素,父级没有设置高度和宽度

父级盒子中子元素水平排列方法

.ad{

flex方法针对父盒子是一个行内元素,flex方法可以使其中的子元素变成行内块(触发BFC这是a没有塌陷被img子元素撑起来的原因)

display:flex;

a img{

flex:1;
width:100%;

针对这种情况使用以下代码也可以实现水平排列,但是a这个父元素塌陷,即点击时没有跳转效果,

需要再解决父盒子塌陷的问题,解决方法是给a元素的样式中添加display:block;再添加宽度高度.

*// float: left;*

// width: 33.3%;

}

}

行内元素转换为块级元素的方法

1.直接使用display:block;使元素的属性改变

2.float；浮动之后检查computed里面的元素的display也会发生改变，变为block

3.使用定位：position：fixed（固定定位）/absolute（绝对定位）

4.使用弹性盒，让父元素变成弹性盒

rem布局适配方案:

1.less+媒体查询+rem

2.flexible.js

问题集合：

1.less使用除法的时候不生效的时候，使用括号可以生效

2.为什么有宽度有高度有背景颜色但是没有显示是?

被后面覆盖了?因为行内元素里面没有写内容

因为元素是行内元素,不能设置宽高,只有里面有内容的时候才能显示出背景颜色

4.设置background:url();属性插入了背景图片,这个元素也设置了大小,但是窗口变化得很小的时候背景图片就看不到了,图片不能跟着页面一起变化?

因为元素设置了rem为单位的宽和高,所以它的大小是会随设置的媒体查询结果改变,但是背景图的大小是由bacjground-size设置的,因为没有设置这个,所以没能实现一同变化