dp
,pt
,ppi
等单位viewport
就是浏览器显示页面内容的屏幕区域,视口可分为布局视口,视觉视口和理想视口;想要理想视口,需要添加meta
视口标签:
属性 | 解释说明 |
---|---|
width | 设置viewport宽度,可以设置divice-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes/no或1/0 |
比如iPhone6的分辨率为1334*750,该手机的物理像素比为2.0,说明我们在开发的时候,一个宽667px,高375px的元素即可占满整个iPhone6的屏幕
设备 | 尺寸(英寸) | 开发尺寸 | 物理像素比(dpr) |
---|---|---|---|
iphone3G | 3.5 | 320*480 | 1.0 |
iphone4/4s | 3.5 | 320*480 | 2.0 |
iphone5/5s/5c | 4.0 | 320*568 | 2.0 |
HTC One M8 | 4.5 | 360*640 | 3.0 |
iphone6 | 4.7 | 375*667 | 2.0 |
Nexus4 | 4.7 | 384*640 | 2.0 |
Nexus 5x | 5.2 | 411*731 | 2.6 |
iphone6 plus | 5.5 | 414*736 | 3.0 |
Samsung Galaxy Note 4 | 5.7 | 480*853 | 3.0 |
Sony Xperia Z Ultra | 6.4 | 540*960 | 2.0 |
Nexus 7 | 7.0 | 600*960 | 1.3 |
iPad Mini | 7.9 | 768*1024 | 1.0 |
准备一张50px*50px的图片放到手机上,由于物理像素比的原因会呈现为一张100*100px的图片,所以会变模糊;但是,如果我们准备一张100*100的图片,然后通过css压缩成50*50的大小,再放到手机上,同样是呈现为100*100px,但清晰度更高,这就是多倍图。可以用cutterman切多倍图
background-size
设置为精灵图的一半background-size:300px 200px;
(先插入图片,后设置大小)
%
,但是是相对于父盒子的大小cover
,是将图片等比拉伸,知道图片完全覆盖盒子contain
,是将图片等比拉伸,直到宽或高完全占满一个移动端开发有两种模式:
max-width/max-height
min-width/min-height
flex
是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性,任何元素都可以指定为flex布局。当为父盒子指定flex布局后,子元素的float
,clear
和vertical
属性都失效flex
的父容器叫做flex容器,它的所有子元素叫做flex项目,子容器可以横向排列也可以纵向排列flex
可以直接设置宽高flex布局的原理就是通过给父盒子添加
flex
属性来控制子盒子的位置和排列方式
flex-direction:
设置主轴方向x
轴为主轴,y
为侧轴row
,按行排列,还有column
按列排列justify-content:
设置主轴上的子元素排列方式属性值 | 说明 |
---|---|
flex-start | 默认值,从头部开始。如果主轴是x轴则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边,再平分剩余空间(重要) |
align-items:
设置侧轴上的子元素排列方式(单行)flex-start
从上到下/flex-end
从下到上center
垂直居中/stretch
拉伸(前提子元素没有高度)align-content:
设置侧轴上的子元素的排列方式(多行)属性值 | 说明 |
---|---|
flex-start | 默认值从侧轴的头部开始排列 |
flex-end | 从侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-aroud | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两边,再平分剩余空间 |
stretch | 设置子项元素高度平分元素高度 |
flex-wrap:
设置子元素是否换行nowrap
,可以设置为wrap
就能换行了flex-flow:
复合属性,相当于同时设置了flex-direction
和flex-wrap
flex-flow:row rap;
flex
属性定义子项目分配剩余空间,用flex
来表示占多少份数.item{flex:n;}
默认n
是0
flex:1
即可实现宽度等分效果,因为flex属性是根据子元素的剩余空间来分配,如果子元素没有设定宽度,那么剩余空间就是全部宽度,然后每个元素占一份flex:2
即可align-self
控制自己在侧轴上的排列方式align-self:flex-end;
属性让他自己从下往上排列order
属性定义项目排列顺序order
都是0
,可以给某个元素设置order
值,越小越靠前,可以是负值rem
(root em)是一个相对单位,类似于em
,em
是父元素字体的大小,而rem
的基准是相对于html
元素的字体大小
html
设置font-size=12px
;非根元素设置width:2rem;
则换算成px就是24pxhtml
里的字体大小随着浏览器的宽度改变而改变呢?使用@media查询,可以针对不同的媒体类型和不同的屏幕尺寸定义不同的样式
@media mediatype and|not|only (media feature) {
CSS-Code;
}
注意:用@media
开头,注意@
符号
将不同的终端设备划分成不同的类型,称为媒体类型
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机等 |
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
① and:可以将多个媒体特性连结到一起,相当于“且”的意思
② not:排除某个媒体类型,相当于“非”的意思,可以省略
③ only:指定某个特定的媒体类型,可以省略
每种媒体都有不同的媒体特性,根据不同媒体类型的媒体特性设置不同的展示风格,暂且了解三个,要加小括号包含使用
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
举例:
@media screen and (max-width:800px) {
body {
background-color: pink;
}
}
这句话的意思是,如果你用的是电脑或手机,并且你浏览器的界面宽度小于等于800像素,就将body
的背景色改为pink
色。
screen
和and
不能省略rem单位是跟着html走的,媒体查询可以根据不同设备不同宽度来修改html的样式,所以媒体查询+rem就可以实现不同设备宽度实现页面元素大小的动态变化
可以通过媒体查询来调用不同的css文件,先准备好两个css文件,由屏幕的宽度来决定使用哪个css样式,参考三星官网。
只要是媒体查询,一律遵循从小到大的顺序排列,语法:
设备 | 常见宽度 |
---|---|
iphone 45 | 640px |
iphone 678 | 750px |
Android | 常见320px、360px、375px、384px、400px、414px、500px、720px,大部分4.7-5寸的安卓设备为720px |
一般情况下,以一套或两套效果图适应大部分屏幕,现在基本以750为准
@import “common”;
这样index.less里就包括了所有common.less的样式了,所以只引入index.css就可以了,不用引入common.css,比较方便
为了限定版心的位置和最大宽度最小宽度,我们要提前给body添加一些样式,苏宁原版样式:
body {
min-width: 320px; //最小宽度320
width: 15rem; //最大宽度用rem可以动态的设置最大宽度
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
我们不需要再根据不同的屏幕尺寸进行媒体查询来动态修改html的字体大小了,这个js文件直接帮我们实现了
它的原理是把当前设备划分为10等份,但是不同设备下比例还是一致的
HTML
的font-size
值是被浏览器的width值影响的,而该滚动条会影响width值,所以尽量在移动端下调试方案:单独制作移动页面
技术:flexible.js+rem
设计图:750px
去插件商店下载cssrem
因为vscode默认html字体大小是16px,所以这个插件是按照16px来计算rem值的,我们要打开setting.json文件修改默认html文字大小为75px,这样1rem的值就是75px
因为flexible.js是按照屏幕宽度来修改html的字体大小,如果屏幕是1000px,那么html的字体就是100px,但我们最大只要750px的宽度就好了,所以使用媒体查询将视口宽度大于750px的时候,html字体设置为75px。而且要加important提权,不然会反被flexible层叠掉
就是通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而实现适配不同设备的目的
设备划分 | 尺寸区间 |
---|---|
超小屏幕(手机) | < 768px |
小屏设备(平板) | >= 768px ~ < 992px |
中等屏幕(桌面显示器) | >= 992px ~ < 1200px |
宽屏设备(大桌面显示器) | >= 1200px |
100%
min-width:767px
750px
min-width:768px
970px
min-width:992px
1170px
min-width:1200px
为什么宽度设置的要比设备尺寸小呢?:有个居中效果,较好看
.container
Bootstrap是基于html,css和javascript的,它简介灵活,使得web开发更加便捷
中文官网:bootcss.com
官网:getbootstrap.com
顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预置样式库。组件和插件,使用者要按照框架所规定的某种规范进行开发
bootstrap已经给我们引入了normalize.css文件,所以我们使用bootstrap的时候不需要再引入.
学好bootstrap的关键就在于知道它定义了哪些样式,以及这些样式能实现什么样的效果
bootstrap已经预先为我们定义好了布局容器这个类,它包括两种:
bootstrap会将.container
容器等分为12列(注意rem是将整个屏幕划分为10等份,不要混淆),可能左边的盒子占2列,中间的盒子占7列右边的盒子占3列,然后通过视口大小的变化,每一列的宽度也会进行变化,里面内容的大小也会随着变化
栅格系统用于通过一系列的行.row
和列.column
的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
超小屏幕(手机) < 768px |
小屏设备(平板) >= 768px |
中等屏幕(桌面显示器) >=992px |
宽屏设备(大桌面显示器) >= 1200px |
|
---|---|---|---|---|
.container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 | 12 |
我们通过屏幕大小的变化来改变盒子所占份数,就能实现响应式的效果。我们可以同时为一列指定多个设备的类名,以便划分不同份数,如
class="col-md-4 col-sm-6"
只添加col-xs-3
,不添加sm/lg
等,代表永远分为3份
类前缀解释:
注意:
.row
必须放到.container
布局容器里col-xs-5
说明占5份.row
作父级,再添加col-xx
类;.row
作父级的好处:可以盖住.row
的父元素的padding值并且和.row
的父级一样高,但这个.row
的儿子是保留padding的,就可以实现外边距的效果margin
值,因为它实现的原理是给每个盒子设定百分比的宽度并加浮动等css样式来实现的,给margin
可能排不开,会把别的盒子挤下去语法:col-xs/sm/md/lg-offset-n
一行是12份,后面的n是几就是让你的盒子向右偏移几份,本质上就是给该盒子添加左外边距
语法:col-md-pull/push-n
pull
是向左拉,push
是向右推,n就是推拉的份数
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
添加以下类:(可以添加多个)这种类名可以给任何元素添加
.hidden-xs/.visible-xs:
仅在超小屏下隐藏/显示
.hidden-sm/.visible-sm:
仅在小屏下隐藏/显示
.hidden-md/.visible-md:
仅在中屏下隐藏/显示
.hidden-lg/.visible-lg:
仅在大屏下隐藏/显示
更多工具/样式/结构等内容请参考bootcss.com
col-md
就可以了因为网页美工给我们的设计稿是1280px的,而bootstrap默认宽1170px,所以我们要修改.container
的最大宽度为1280px,用媒体查询,当视口大于等于1280时,.container
值1280
bootstrap已经写好了清除浮动,类名加上clearfix即可
策略:我们先布局md以上的pc端布局,最后根据实际需求再修改小屏幕和超小屏幕的特殊布局样式
.publish
需要再当做一个盒子分为12份,左边文字占9分,右边图片占3,用col-sm-9/3
来表示,说明在小屏幕以上都是按左9右3来划分hidden-xs
让他在超小屏下隐藏,并添加一个span
来代替它显示,并给该span
添加visible-xs
属性让这个span
仅在超小屏出现.nav
应横着显示,所以我用媒体查询给他们添加了浮动,因为要再xs和sm屏中显示,也就是小于992px,用max-width:991px
是极好的article
中的5张图片太挤了,所以要改变排列方式,并且下面的.publish
的文字太多了,图片也不需要了,所以全部添加隐藏:hidden-xs
总结: 先做md和lg的pc端页面,然后慢慢缩小,看哪里不合适就隐藏或添加新元素来代替,并结合媒体查询改变某些样式