如何快速把pc端网站适配移动端,实现响应式

  • 发表时间: 2019-07-14
  • 分类: HTML/CSS
  • 阅读量: 531
  • 作者: 七七

何谓响应式网站?也就是区别于传统网站,能自动识别设备屏幕大小,根据屏幕分辨率做出自动调整清晰展示页面的网站。同一个网站,不管你是在电脑端,还是在手机或者Ipad端,它都可以提供相同的用户浏览体验。

先看看适配响应式后的效果

PC端:

七七博客-前端个人博客网站.jpg

移动端:

IMG_20190714_150700.jpg

下面讲解一下大概过程

一、首先需要在<head></head>标签中写上如下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    声明网页是否允许放大缩小

二、引入移动端CSS样式

    可以通过两种方法引入

    1.在meta标签中引入css文件

   <link rel="stylesheet" href="css/m_index.css" media="screen and (max-width:767px)" />

    意思是在屏幕宽度小于767px的时候执行引入的css文件样式

    2.在head标签中写入style标签

    <style type="text/css"> 
        @media(max-width:767px)
        { 
        }
    </style>

    含义同上,在屏幕宽度小于767px的时候执行的css样式

三、修改css样式,在宽度小于某个值的时候将不需要元素display:none;隐藏掉。网页内元素宽度尽量使用百分比%,文字大小可使用em等计量单位。

至此,大功告成了


文章评论

张琪琪

web前端开发

一个95后程序猿!记录平时遇到的技术问题和学习到的新知识,分享自己的一些生活、感悟。网站内容不定期更新,欢迎大家关注,共同交流进步。

点击排行

注册会员

用户名:

密码:

邮箱:

已有账号?登录

会员登录

用户名:

密码:

邮箱:

没有账号?注册