H5

最新推荐文章于 2024-06-05 13:12:39 发布

「已注销」

最新推荐文章于 2024-06-05 13:12:39 发布

阅读量142

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/qq51370/article/details/109052784

版权

HTML&CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

视口标签viewport

// 标准写法
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

// width viewport宽度 可设置device-width特殊值
// initial-scale 初始缩放比
// minimum-scale 最小缩放比
// maximum-scale 最大缩放比
// user-scalable 是否可缩放(yes/no)

物理像素/物理像素比

// 物理像素 分辨率
// 物理像素比 1px（开发像素）能显示的物理像素点的个数
// PC端 1px等于1个物理像素
// 移动端 1px等于2个物理像素

background-size

// 一般图片采用img 背景图采用background-image
// background-image引入图片需设置盒子宽高 盒子放入图片
// 移动端图片多倍图
// background-size:原图宽 / 倍率 auto;
// 图片若为精灵图 background-positin: 左定位 / 倍率 右定位 / 倍率

// background-size: 图片的宽度 图片的高度 | cover | contain;
// px/百分比（百分比为元素宽高百分比）
// cover 覆盖式等比例拉伸 图片完全覆盖元素宽高 不留空白区域 多余切割
// contain 等比例拉伸 宽或高完全覆盖元素 可能留空白区域

特殊样式

<a href="#">链接</a>

a {
  /* 点击高亮背景 */
  -webkit-tap-highlight-color: transparent;
}

<input type="button" value="按钮">

input {
    /* ios加上才能给按钮和输入框自定义样式 */
   -webkit-appearance: none;
}

img,
 a {
   /* 禁用页面长按弹出菜单 */
   -webkit-touch-callout: none;
}

流式（百分比）布局附件
初始样式normalize.css（https://necolas.github.com/normalize.css/）

// 百分比设置元素宽高 最外层设置100%屏幕宽度
// 伴随屏幕宽高布局 为防止过高/低宽度样式错乱 可设置min-width/max-width
body {
  width: 100%;
  min-width: 320px;
  max-width: 980px;
  margin: 0 auto;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
 line-height: 1.5;
 color: #666;
}

// img图片父元素高度等于行高 img不居中 
// 由于图片默认与基线对齐 需设置vertical-align: middle;

// 精灵图缩放
// background-position: 测量x/2 测量y/2;
// background-size: 原图宽度一半 auto;

flex弹性布局附件（微信官方详解）

// 通过给父元素添加flex属性，来控制子元素的位置和排列方式
// 父元素

// 主轴方向
// flex-direction: row | row-reverse | column | column-reverse
// row 默认主轴x轴 侧轴 y
// row-reverse 翻转主轴 
// column 主轴y轴 
// column-reverse 主轴y轴 翻转主轴

// 主轴排列方式
// justify-content: flex-start | flex-end | center | space-around | space-between
// flex-start 主轴左侧
// flex-end 主轴右侧
// center 居中
// space-around 每个子元素相同左右margin
// space-between 首尾元素紧贴父元素 均匀排开

// 是否自动换行 
// 默认不换行（nowrap） 如果子元素太多 装不开 会缩小子元素宽度
// flex-warp: wrap | nowrap

// 侧轴排列方式（单行）
// align-items:center | flex-start | flex-end | stretch
// center 居中
// flex-start 从上到下
// flex-end 从下到上 
// stretch 拉伸

// 侧轴排列方式（多行 单行无效）
// align-content:center | flex-start | flex-end | space-around | space-between | stretch 
// flex-start 从上到下
// flex-end 从下到上 
// center 居中
// space-around 每个子元素相同左右margin
// space-between 首尾元素紧贴父元素 均匀排开
// stretch 子元素高度平分父元素高度

// 复合属性 
// flex-flow: flex-direction flex-warp;

// 子元素
// flex:number 默认0
// 分配子元素剩余空间
// 栅格元素 25% 50% 25% 分布 
// flex分别为 1 2 1
// 8个元素两行4个显示 
// flex可以为25%（百分比相对父级）

// align-self 控制子项在侧轴的排列方式
// 单个元素与其他元素不一样的对齐方式
// align-self: flex-end

// order 定义元素排列顺序
// order:number 默认0 -1则在最前面

box-sizing

box-sizing: border-box;
border:1px solid #ccc;
height: 20px;
line-height: 20px;

// 此时文字不会竖直居中 而是偏下 
// line-height = height - 2 * border-width = 18px

linear-gradient背景色渐变

// 左渐变到右
background-color: -webkit-linear-gradient(left, color, color)

// 左上渐变右下
background-color: -webkit-linear-gradient(left top, color, color)

rem布局（less + 媒体查询 + rem）

// 选择一套标准尺寸 750 
// 750 / 15（份数不固定） = 50（html文字大小）
// 页面元素rem值 = 元素750像素下的px值 / html文字大小

// 媒体查询
@no: 15; // 份数

@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

// 页面元素
// 设计稿750下文字大小50px
@fs: 50;

p {
    font-size:25rem / @fs;
}

// em 相对父元素的字体大小
// rem 相对html元素的字体大小
// rem 可通过修改html文字大小整体控制页面中元素大小

html {
   font-size:14px; 
}

div {
    font-size:12px;
}

div p {
    width: 10em; // 10 * 12px = 120px
    height: 10rem; // 10 * 14px = 140px
}

<div>
    <p></p>
</div>

媒体查询

@media mediatype and|not|only (media feature) {
   css-code;
}

// mediatype 媒体类型
// all 所有设备  print 打印机和打印机预览 screen 电脑屏幕，平板电脑和手机

// and|not|only 关键字
// and 并且+媒体特性
// not 非/不含+媒体特性
// only 某个特定的媒体类型

// (media feature) 媒体特性
// width 页面可见区域宽度
// max-width 页面可见区域最大宽度
// min-width 页面可见区域最小宽度

// 屏幕宽度 
// 小于540 body背景色red
// 大于540 body背景色green
@media screen and (max-width: 540px) {
   body{
       background:red
   }
}

@media screen and (min-width: 540px) {
    body {
        background-color: green;
    }
 }

引入资源

// 针对不同屏幕尺寸 调用不同css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

rem布局（flexible.js + rem）附件
引入flexible.js （https://github.com/amfe/lib-flexible）

// 默认flexible 份数10份
// 即750分辨率下 html字体大小为75px

vscode安装插件cssrem

// cssrem默认字体大小16 调整为 75

css px值输入自动转换rem

// 默认flexible根据屏幕宽度调整html字体大小
// 大于固定宽不需要再调整字体大小
// 大于750 字体大小统一75px
@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

响应式布局

// 媒体查询针对不同宽度的设备进行布局和样式的设置，达到适配不同设备

// 设备划分
// 超小屏幕（手机） <768px
// 小屏设备（平板） >=768px <992px
// 中等屏幕（桌面显示器） >=992px <1200px 
// 宽屏设备（大桌面显示器） >=1200px

.container {
   height: 150px;
   background-color: red;
   margin:0 auto;
}

@media screen and (max-width: 767px) {
   .container {
      width: 100%;
   }
}

@media screen and (min-width: 768px) {
   .container {
       width: 750px;
    }
}

@media screen and (min-width: 992px) {
    .container {
        width: 970px;
     }
}

@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}