前端基础7：a标签常用方法和元素居中方式，响应式@media

a标签

a标签作用

• 锚点
  • 语法：href=“#+指定位置”
  • a标签href属性的属性值为相应要跳转到的元素id属性名前加#
  • <a href="#top">回到（顶部/指定位置）
• 实现打电话功能
  • 语法： <a href="tel:123123">
• 实现发邮件功能
  • 语法： <a href="mailto：134124124@qq。com">
• 注意事项：取消a的点击事件采用以下方法
  • <a href="javascript：void（0）">

使元素居中的方式

• 1.line-light：可以使文本上下居中
• 2.margin：0 auto； 使元素左右居中
• 3.padding改变元素内边距可以使内容居中显示
• 4.通过定位position改变子元素位置，实现居中
• 5.通过transform:translate（-50%，-50%）；改变相对自己x轴，y轴的长度，实现居中。

响应式

一个网站能够兼容多个终端，并且在各个终端可以有很好的展示体验

• 当屏幕宽度很大的时候 一行显示6个
• 当屏幕宽度中等的时候 一行显示3个
• 当屏幕宽度较小的时候 一行显示2个
• 当屏幕宽度很小的时候 一行显示1个

@media 媒体类型(媒询)

指我们在何种媒体上打开我们的页面 @media是可以查看我们当前的一个媒体的类型

• 语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

@media only screen{
	仅仅在彩屏设备下识别
}
/*and 用来连接媒体类型 和 媒体特性*/
@media all and （min-width:500）{
	//当屏幕宽度大于等于500的时候识别
}
复制代码

• 媒体类型 |值|描述| |--|--| |all|用于所有设备| |print|用于打印机| |screen|用于电脑屏幕，平板电脑，智能手机等。| |speech|用于屏幕阅读器等发生设备|

媒体特性

• width 文档宽度
  • min-width:500px 当屏幕宽度大于等于500像素的时候
  • max-width: 500px 当屏幕宽度小于等于500像素的时候

样式引入方式

• 样式表中末尾添加
  • @media and (min-width:600px){}
• link标签
  • <link rel = "stylesheet" href="css/css.css" media="all and (min-width:600px)" />
• 外链式
  • @import url(css.css)(max-width:600px)

转载于:https://juejin.im/post/5b853a5651882542c20f2c32