.标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1
改代码的意义是视口宽度(width)=设备宽度(device-width)
将页面大小 根据分辨率不同进行相应的调节 以展示给用户的大小感觉上差不多。
如果不设置,一般默认为视口width 980px,height 1024px
*{
margin: 0;
padding: 0;
}
.wraper{
width: 50%;
height: 200px;
background-color: chartreuse;
}
width = device-width : iphone或者ipad 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
initial-scale=1.0 : windows phone ie浏览器 上横竖屏的宽度 = 竖屏时候的宽度 不能自适应的问题
所以一起写可以达到互相兼容的效果。
2.设置视口
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width: 可视区宽度
device-width: 设备宽度
minimum-scale: 最小缩放比
maximum-scale: 最大缩放比
user-scalable: 是否允许用户缩放(手机双击放大等)
css像素根据设备像素进行计算 1css 像素 == 1 是设备像素 设备的分辨率 dpi值来计算css像素真正展现的大小(这里坐着在前面一章节已经进行了比较详细的解析)
3.响应式网页开发方法
流体网格:可伸缩的网格 (大小宽高 都是可伸缩(可用flex或者百分比来控制大小)float)—》 布局上面 元素大小不固定可伸缩
弹性图片:图片宽高不固定(可设置min-width: 100%)
媒体查询:让网页在不同的终端上面展示效果相同(用户体验相同=>让用户用着更爽) 在不同的设备(大小不同 分辨率不同)上面均展示合适的页面
主要断点: 设备宽度的临界点
(临界点)大小的区别 —》 宽度不同 —》 根据不同宽度展示不同的样式
响应式网页开发主要是在css样式上面进行操作
其中媒体查询为主要应用方式。
4.媒体查询
媒体查询是向不同设备提供不同样式的一种方式,它为每种类型的用户提供了最佳的体验。
css2: media typemedia type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。
css3: media querymedia query是CSS3对media type的增强,事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。
媒体查询三种方式(对应css引入方式)
外部引入link
<link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">
外部引入@import
@import 'index.css' screen and (max-width: 375px);
内部引入style
css样式引入媒体查询不占用权重,所以一般放在css最后面(避免被覆盖)
@media screen and (max-width: 375px){
html, body {
width: 100%;
height: 100%;
background-color: red;
}
逻辑操作符:
合并多个媒体属性 and
@media screen and (min-width: 600px) and (max-width:1000px)
@media screen and (min-width: 769px), print and (min-width: 6in)
没有or关键词可用于指定备用的媒体功能,可以将备用功能以逗号分割列表的形式列出
这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备
指定否定条件
@media not screen and (max-width:300px)
除了宽度小于300px的才可以显示
向早期浏览器隐藏媒体查询
Only指定某种特定的媒体类型 为了兼容不支持媒体查询的浏览器
@media only screen and (max-width:300px)
==
@media screen and (max-width:300px)
device-width/device-height 是设备的宽度(如电脑手机的宽度 不是浏览器的宽度)
width/height使用documentElement.clientWidth/Height即viewport的值。渲染宽度/高度/视口宽度
5.单位值
Rem:rem是CSS3新增的一个相对单位(root em,根em)相对的只是HTML根元素。
html{
font-size: 14px;
}
.wraper{
width: 10rem;
height: 200px;
background-color: chartreuse;
}
最终等于html跟标签的font-size的10倍
Em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(font-size属性是可以继承的)。
.wraper{
font-size: 16px;
width: 10em;
height: 200px;
background-color: chartreuse;
}
Vw:相对于视口的宽度。视口被均分为100单位的vw
.wraper{
font-size: 16px;
width: 50vw;
height: 200px;
background-color: chartreuse;
}
Vh:相对于视口的高度。视口被均分为100单位的vh
同上vw
Vmax: 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
Vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin