前端响应式布局

更新日期: 2020-02-29阅读: 2k标签: 布局

概念

Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。  


步骤

1. 设置 Meta 标签

大多数移动浏览器html页面放大为宽的视图(viewport)以符合屏幕分辨率,可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度,按1:1的尺寸显示并禁止初始的缩放。在<head>标签里加入这个meta标签。  

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


2.通过媒体查询来设置样式Media Queries

Media Queries 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写:  

// 这里面的样式会覆盖掉之前所定义的样式
@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}


3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:  

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}


4.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。  

css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。rem是相对于根元素的,不要忘记重置根元素字体大小:

html{font-size:100%;}
完成后,你可以定义响应式字体:
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

5.注意事项

宽度需要使用百分比

#head { width: 100% }
#content { width: 50%; }

处理图片缩放的方法

给图片指定的最大宽度为百分比。假如图片超过了,就缩小;假如图片小了,就原尺寸输出:

img { width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容。在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能。

// HTML 结构
<img src="image.jpg"
    >600px="image-600px.jpg"
    >800px="image-800px.jpg"
     alt="">

// CSS 控制:
@media (min-device-width:600px) {
    img[>600px] {
        content: attr(>600px, url);
    }
}
@media (min-device-width:800px) {
    img[>800px] {
        content: attr(>800px, url);
    }
}     

除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:

#log a{
    display:block;
    width:100%;
    height:40px;
    text-indent:55rem;
    background-img:url(logo.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
}
    // background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
    // background-size:cover; 等比扩展图片来填满元素
    // background-size:contain; 等比缩小图片来适应元素的尺寸

其他属性

例如 pre ,iframe,video 等,都需要和img一样控制好宽度。对于table,建议不要增加 padding 属性,低分辨率下使用内容居中:  

table th, table td { padding: 0 0; text-align: center; }

链接: https://www.fly63.com/article/detial/8471

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

使用flex实现5种常用布局

flex常用布局:经典的上-中-下布局。在上-中-下布局的基础上,加了左侧定宽 sidebar。左边是定宽 sidebar,右边是上-中-下布局。还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

CSS position 属性_css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,position定位是指定位置的定位,以下为常用的几种:static(静态定位)、relative定位(相对定位)、absolute定位(绝对定位)、fixed(固定定位)、inherit定位

css圣杯布局的实现方式

css圣杯布局思路:外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定,中间宽度自适应。中间栏优先渲染。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!