移动端视口(viewport)和布局

视口

两种像素: 物理像素和 CSS 像素。

  1. 物理像素:分辨率,设备屏幕的物理像素。
  2. CSS 像素:由web开发者提供,是 CSS 中使用的一个抽象单位。

三个视口: 布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

  1. 布局视口是移动端默认的布局视口,早期解决pc端界面在手机端显示的问题
  2. 视觉视口是用户正在看到的网站的区域。
  3. 理想视口是给定设备物理像素的情况下,最佳的布局视口。

布局

流式布局(百分比布局);rem布局;flex布局;

flex布局
通过给父元素添加flex属性,控制子盒子的位置和排列方式

  1. flex-derection:设置主轴方向 [row / column-reverse]
  2. justify-content:设置主轴上子元素的排列方式 [flex-star / center / space-around平分剩余空间 / space-between贴边再平分]
  3. flex-wrap:设置是否换行
  4. align-content:侧轴子元素排列方式(多行)
  5. align-item:侧轴子元素排列方式(单行)[center]
  6. flex-flow:复合属性,flex-derection和flex-wrap的合写

rem适配布局
rem是单位,是html根元素的字体大小
媒体查询:针对不同屏幕尺寸设置不同样式

@media screen and (max-width:800px){
	body{
		backgound-color:red
	}
}

响应式布局:使用媒体查询。使用bootstrap框架(栅格系统)。
栅格系统:container容器,划分为12份。通过行列排列。row、col-lg/md/sm/xs-所占份数[大屏/中屏/小屏/超小屏]。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读