2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

关于响应式web设计

html5htmlcss作者:猿2048志愿者
手机网站+电脑网站+平版网站 = 响应式网站

在没有足够经费跟精力的做一个手机网站的情况下,响应式网站是个不错的选择。
它有以下的优点:

  • 减少工作量(网站代码只要一份,只需要做js方面的改动及可以了)
  • 节省时间(每个设备都得到考虑,搜索也友好)

首先是[<meta>][1]的设置:
大多数手机的浏览器内核是居于webkit核心,且大多数浏览器都支持使用viewport meta元素覆盖默认的画布缩放。所以我们可以在head中插入一个meta设置具体的宽度或者缩放比例。

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

width = device-width 浏览器页面的宽度等于设备的宽度,user-scalable = no,静止缩放,若为1.0则是:浏览器页面安装视口大小渲染页面,maximum-scale minimum-scale 最大最小缩放页面到设备宽度的几倍。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

针对IE浏览器的一些设置,因为css3是响应式关键技术,但是IE浏览器的支持有限,所以上诉代码的意思是:
告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。具体有关這个的可参考這个博客
设置了viewport meta标签后页面不缩放了,我们可以根据css3的媒体查询针对不同视口的宽度进行修正
csss3媒体查询


@media only screen and (max-width:30em){};
@media only screen and (max-width:50em){};
@media only screen and (min-width:30em) and (max-width:50em){};
@media print{}//打印样式

最大宽度是50em中写的样式,在 30em < width < 50em 中一样的效果,所以不用重复写
百分比布局和rem em
使用百分比布局创建流动的弹性界面:
即是将元素固定尺寸转换为相对尺寸,公式:目标元素的宽度/上下文元素的宽度=百分比宽度,引用自书本《无懈可击的Web设计》。
当被包裹的元素有border时,若不想border随上下文变宽或便窄,可以将被包裹元素减去两边的border,然后再用那个公式。
同理,padding-left,padding-right,以及margin-right,margin-left的大小也是一样的道理。
然后就是页面字体的大小了。
em 相对的也是上下文,rem(root em )相对的是html根元素,

{
font-size:16px;
font-size:1em;//这三个值效果是相等的效果。
font-size:100%;
}


html{
font-size: 16px;
}
.parent{
font-size: 2px;
}
.son{
font-size: 2em;//son下的字体大小是4px;
}


html{
font-size: 16px;
}
.parent{
font-size: 1rem;//16px;
}
.son{
font-size: 2rem;//32px;
}

//我见一些前辈大都這样设置,我知道后也比较喜欢這个,
//因为不会像em那样产生嵌套混乱的问题,也可以很方便的设置24,28這样数值。
html{
font-size: 62.5%;//也就是(10/16)*100%;
}
.parent{
font-size: 2.4rem;//24px;
}
.son{
font-size:1rem;//10px;
}

弹性图片

img{
max-width:100%;//自动缩放到与容器100%匹配
}
.side img{
max-width:50%;//特定的某个样式
}
但是这种会导致图片在视口很大的时候被拉长,所以可以這样
.side img{
    width: 30%;
    max-width:100px;
}  

响应式图片(加载与设备相匹配的图片)

<img class="image" src="a.jpg"
     srcset="480px.jpg 128w, 680px.jpg 256w, 890px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">
     //srcset用来指向提供的图片资源,sizes用来表示尺寸临界点,响应响应式布局
<picture>
  <source srcset="1.png" media="(min-width: 400px)">
  <source srcset="2.png" media="(min-width: 800px)">
<img src="a.png" alt="pic">
</picture>
//IE均不支持,不过Edg兼容模式支持
​<picture>
  <source srcset="a.svg" type="image/svg+xml">
  <img src="b.png" alt="pic">
</picture>

还有就是之前的js来监听window.resize事件,以及svg,我对svg 不熟,就不说了。
在响应式图片里面其实还涉及到了物理像素,逻辑像素,dpi等,但我觉得新的方案里面不需要我们写 1x 2x 那些了,我就写了先,因为我对這个也只知道大概~
希望下次可以填满点,如果有错误,欢迎指正~

本文来源于网络:查看 >
« 上一篇:《前端面试江湖》读书笔记
» 下一篇:不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo
评论
点击刷新
评论
相关博文
×添加代码片段