[成都|结业弟子]JS-董家宇|2019年02月18日的日报-技能树.IT修真院

发表于： 2019-02-18 20:39:27

1 383

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

html中的锚点

一、页面内跳转的锚点设置

页面内的跳转需要两步：

方法一：

①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）

②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容

方法二：

①：同方法一的①

②：设置锚点的位置 <h3 id="miao">喵星人基地</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#

方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

响应式布局方法：

1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点：

1.1.页面很死板，在更大的屏幕上，页面左右2边留白。

1.2.不适应响应性布局。

2. 流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：

百分比宽度 = 目标元素宽度 / 上下文元素宽度

这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。

缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。

3 弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：

百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸

使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。

媒体查询：

根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。

媒体查询使用如下：比如内联样式可以如下写：

1. 最大宽度960px一种布局：

@media screen and (max-width:960px) {<=960}

2. 最小宽度600px 另一种布局：

@media screen and (min-width:600px) {>=600}

3. 宽度在600px 到 960px之间，如下:

@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

4.外联样式使用link标签来引用样式：

如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。

做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。