响应式开发网站

leap_frog 发布于2019-08-01 16:25 / 1070人阅读

摘要：响应式布局，先看效果大屏效果中屏效果小屏效果下面是一些笔记心得响应式网站的优点减少工作量网站，设计，代码，内容都只有一份做少量更改节省时间多个分辨率设备都能正确显示搜索优化缺点会加载更多的样式和脚本资源设计比较难精确定位和控制老版本浏览器的

FlexLayout

https://github.com/whhlulu/Re...

响应式布局，先看效果 大屏效果：>50rem

中屏效果：>30rem, <=50rem

小屏效果：<30rem

下面是一些笔记心得

================================================
PART I：
响应式网站的优点：
1 减少工作量
1）网站，设计，代码，内容都只有一份
2）JS,CSS做少量更改
2 节省时间
3 多个分辨率设备都能正确显示
4 搜索优化

缺点：
会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器的兼容问题

================================================
PART II：
主流浏览器
Chrome
IE/Edge（Edge : > 12)
Firefox
QQ（微信采用QQ浏览器X5的内核）
Safari/iOS Safari
360
UC
猎豹

================================================
PART III：
媒体查询 1
@media all and(min-width:800px) and (orientagion: landscape){

...

}

逻辑操作查询符：not and only , (, 等同于 or) css3媒体属性

width: 视口宽度
height: 视口高度
device-width: 渲染表面的宽度，就是设备屏幕的宽度
device-height:渲染表面的高度，就是设备屏幕的高度

orientation:检查设备处于横向/纵向
aspect-ration:基于视口的宽高比
device-aspect-ratio: 渲染表面的宽度，就是设备屏幕的宽度
color:每种颜色的位数bits，比如 min-color:16位，8位
resolution:检测屏幕或打印机的分辨率，如： min-resolution:300dpi

以上属性都可以添加 min- 或 max- 前缀

================================================
媒体查询 2
width: 视口宽度
device-wdith

viewport 视口
针对PC，只有一个视口
针对移动设备，有三个视口：
布局视口(layout viewport)
可视视口(visual viewport)
理想视口(ideal viewport)

===============================================
强制使用最新版本的IE文档模式

===============================================
cssreset.css 用来消除所有浏览器在一些默认样式上面的差异
normailize.css 是 cssreset.css 的优化版本，使用更加广泛

===============================================
长度单位： px, em, rem
使用相对的值，不同的显示屏尺寸会有变化
px : 固定的单位
em : 相对的长度单位，参照了父元素的font-size，具有继承的特点，如果一直找父容器都找不到font-size，那会使用浏览器的默认em设置：1em = 16px
rem ：也是使用相对值，不过是参照了 html 元素，浏览器的默认值也是：1rem = 16px

云服务器 GPU云服务器响应式网站响应式网站代码响应式响应式布局

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

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

响应式设计个人的一些总结

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

LeoHsiun 2019-08-01 15:32 评论0 收藏0
自适应/响应式的功课.....

摘要：请开始清算市面上的电子产品得有百八十种的屏可以供君挑选这其实对在前端一线工作的程序员而言挺灾难的自适应响应式概念解决不同终端的适配问题我们一般有两套方案一是自适应布局二设置响应式布局所谓的自适应就是屏幕变大或是变小它的内容也要做到同步缩放到请开始清算市面上的电子产品,得有百八十种的屏可以供君挑选....这其实对在前端一线工作的程序员而言挺灾难的....showImg(https://...

Fourierr 2019-08-30 14:05 评论0 收藏0
移动优先的响应式布局

摘要：虽然兼容性方案的体验不如常规方案，但保证了功能可用性移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。前面的话　　随着移动互联网的兴起，不同设备的分辨率相差较大，如果在不同的设置上显示同一个页面，则用户体验差。响应式网页设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。它使得一个网站可以在任何类...

番茄西红柿 2019-04-23 13:43 评论0 收藏0
响应式网站的优缺点

摘要：优点如下在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。对于响应式，前端工程师应该不会陌生，响应式网站是老外在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。优点如下：1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设...

pepperwang 2019-08-29 12:12 评论0 收藏0
响应式网站的优缺点

摘要：优点如下在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。对于响应式，前端工程师应该不会陌生，响应式网站是老外在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。优点如下：1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设...

王陆宽 2019-08-01 16:28 评论0 收藏0