广州seo是一家专注百度优化规则的响应式营销型网站优化的公司,值得客户信赖!
建站电话:138-2557-5516(7*24小时)

专业建站 百度快速排名

正规白帽人工优化,关键词1至7天上首页

响应式网站建设 响应式网站建设
您所在位置:主页 > 网站定制 > 响应式网站建设 >
立即咨询
营销网站建设
|
品牌网站建设
|
外贸网站建设
|
响应式网站建设

web前端怎样做响应式

2018:03:31 18:01:24 来源:响应式营销型建站 点击: 关键词:外贸网站建设

web前端响应式的布局在应用的越来越多,下面介绍web前端是怎样做响应式。

web前端怎样做响应式

  • 1

    所谓的响应式就是使网站在电脑,平板,手机登不同分辨率的终端上有正常的访问体验,相信有人体验过有些pc端网页在移动设备上访问的尴尬,下面介绍一下web实现响应式。

  • 2

    首先需要添加meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    设置设备按照一比一的尺寸进行显示,并且禁止用户缩放页面

    web前端怎样做响应式


  • 3

    我们利用媒体查询来实现不同分辨率下的显示正常

    @media screen and (max-width: 375px) {

          //分辨率在375下的样式

          ......

    }

    也可以设置最小的宽度

    @media only screen and (min-width: 320px) and (max-width: 767px) {

         //分辨率在320~767px内的样式

         ......

    }

    正常显示如图一显示,然后修改为手机模式为如图二显示

    web前端怎样做响应式
    web前端怎样做响应式
    web前端怎样做响应式


  • 4

    响应式网页的单位选用:目前rem使用的比较广泛。

    rem是根据页面根节点的font-size的值进行设置,这就给我们设置响应的数值大小带来了可能,如图所示;

    这块需要说明一下:网页初始化默认的字体大小是16px,所以为了方便计算,一般设置根节点的font-size为62.5%,也就是16px*62.5%=10px,如果不想设置10为基数,想设置其他的数值X为基数,那么根节点的font-size为X/16=百分数。

    web前端怎样做响应式
    web前端怎样做响应式
    web前端怎样做响应式


  • 5

    栅格化布局,本例利用bootstarp的栅格系统

    下图是利用.col-xs-* 和 .col-md-*,看下图2和图3可以很清楚的看到,根据窗口的改变,模块的位置也进行了改变。

    注:bootstrap栅格参数说明

    .col-xs-:手机  <768px

    .col-sm-:平板  ≥768px

    .col-md-:桌面显示器   ≥992px

    .col-lg-:大桌面显示器   ≥1200px

    web前端怎样做响应式
    web前端怎样做响应式
    web前端怎样做响应式


  • 6

    做响应式布局在设置样式上一定要注意:

    1:width尽量使用百分数

    2:图片的响应上需要多加注意

    3:单位选择上建议使用rem


end
网站建设流程
  • 网站需求分析
  • 网站策划方案
  • 页面风格设计
  • 程序设计研发
  • 资料录入优化
  • 确认交付使用
  • 后续跟踪服务
  • +86 0757 81089123138 2557 5516
网站建设服务更多+
我们已经准备好了,你呢?

2019我们与您携手共赢,为您的企业形象保驾护航!

 
建站优化售前
seo售前
建站优化售后
seo售后
售前咨询热线
0757-8108 9123
售后咨询热线
138-2557-5516