集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web前端:前端常见的适配方式的方法

发布者: 成都达内     浏览次数:     发布时间:2019-05-20 11:04:00

前端常见的适配方式的方法 作为一个真正的前端工作者适配是一个老生常谈的问题,那么今天给大家总结一下在工作当中常用做适配的方式。...

  成都web前端常见的适配方式的方法 作为一个真正的前端工作者适配是一个老生常谈的问题,那么今天给大家总结一下在工作当中常用做适配的方式。

  一、固定布局(pc端)(静态布局)

  以像素作为页面的基本单位,不管设备和浏览器宽度,只设计一套尺寸

  二、根据不同根据不同的分辨率,加载不同的CSS样式文件(可切换的固定布局)自适应布局

  成都web前端:前端常见的适配方式的方法

  注意:注意这里的js一定要写在标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来

  2、媒体查询

  媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

  link元素中的CSS媒体查询

  成都web前端:前端常见的适配方式的方法

  css3

  成都web前端:前端常见的适配方式的方法

  viewport:视口

  width=device-width:就将布局视口设置成了理想的视口。

  initial-scale:[0,10] 初始缩放比例,1表示不缩放

  maximum-scale:[0,10] 最小缩放比例

  maximum-scale: [0,10] 最大缩放比例

  user-scalable: yes/no 是否允许手动缩放页面,默认值为yes

  语法:

  @media mediatype and|not|only (media feature) {

  CSS-Code;

  }

  第一种方法是css2媒体查询用法,最大的弊端是他会增加页面http的请求次数,增加了页面负担,

  我们一般用第二种方法CSS3把样式都写在一个文件里面才是最佳的方法。

  但是媒体查询的缺点也很明显,如果在浏览器大小改变时,需要改变的样式太多,那么多套样式代码会很繁琐。

  三、rem布局(弹性布局)移动端

  rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。

  1、媒体查询结合rem布局

  媒体查询动态修改根元素的大小,使得rem 一直在跟着变化,响应式就成功了。

  为什么使用媒体查询结合rem布局

  一个物体在一个超大空间中显得很小,但是在小的空间存放不下,为使得页面布局不管在什么设备上都是正常,协调的情况,就会采用媒体查询 + rem,来根据不同的设备去相应的改变元素的大小。

  媒体查询结合rem布局的缺点

  计算起来太繁琐

  2、flexble.js和rem布局:

  用法:首先在页面导入flexible.js导入去掉mete标签(禁止缩放)的设置

  当设计图为750px;从设计图量出header为88px;

  css设计为header的height 88/100=0.88rem;

  3、rem+VW布局

  成都web前端:前端常见的适配方式的方法

  为了方便计算可把html中font-size设置成100px;但是100px固定大小不会自动适配。所以把100px转换成vw

  100px=?vw等于他的视口宽度

  假如:设备:640px dpr:2 320px

  因为 100vw=320px

  所以 1vw=3.2px;

  所以 100px=31.25vw

  假如 设备750px dpr为2 375px

  因为 100vw=375px;

  所以 1vw=3.75px;

  所以 100px=26.67vw

  当设备640px :31.25vw

  当设备750px :26.67vw

  注意文字要单独设置单位为px,否则文字为100px太大,要用媒体查询的方式改变文字大小。

  优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

  缺点:这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

  四、百分比布局 (流式布局)

  以百分比作为页面的基本单位,可以适应一定范围内所有的尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果

  五、混合式布局

  成都web前端同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位

  六、响应式布局

  1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。

  2、设计方法:媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

  优点:适应pc和移动端,如果足够耐心,效果完美

  缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。

  响应式页面在头部会加上这一段代码:

  成都web前端:前端常见的适配方式的方法

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56