关于响应式web设计

morgan 发布于2019-08-29 13:55 / 3306人阅读

摘要：手机网站电脑网站平版网站响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。

手机网站+电脑网站+平版网站 = 响应式网站

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

减少工作量（网站代码只要一份，只需要做js方面的改动及可以了）

节省时间（每个设备都得到考虑，搜索也友好）

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

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

针对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;
}

响应式图片（加载与设备相匹配的图片）


     //srcset用来指向提供的图片资源,sizes用来表示尺寸临界点，响应响应式布局

  
  


//IE均不支持，不过Edg兼容模式支持

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

GPU云服务器云服务器响应式设计响应式响应式布局响应式网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112799.html

关于响应式web设计

摘要：手机网站电脑网站平版网站响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。手机网站+电脑网站+平版网站 = 响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。它有以下的优点：减少工作量（网站代码只要一份，只需要做js方面的改动及可以了）节省时间（每个设备都得到考虑，搜索也友好）首先是[][1]的设置：大多数手...

bbbbbb 2019-08-02 15:58 评论0 收藏0
重温"什么是响应式网页设计？响应式布局的实现原理"

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Nekron 2019-08-29 12:28 评论0 收藏0
重温"什么是响应式网页设计？响应式布局的实现原理"

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Joyven 2019-08-01 16:43 评论0 收藏0
响应式设计个人的一些总结

摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...

LeoHsiun 2019-08-01 15:32 评论0 收藏0