自适应与响应式
chelflan
不积跬步无以至千里
展开
-
响应性设计
作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日发布了重大的更新,目的是提高响应式在移动终端上的运行效率。尽管在更新中没有明确表明你必须使用响应式设计。只是简单的提示响应式设计拥有不错的UX和优越的性能,是移动设计方面的一个不错的选择。考虑到这一点,让我们一起来测试一下“响应式设计...转载 2018-05-16 16:39:26 · 938 阅读 · 0 评论 -
CSS自适应布局总结教程
这可能是史上最全的CSS自适应布局总结教程标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题。所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transfor...转载 2018-05-30 22:34:39 · 311 阅读 · 0 评论 -
CSS实现三栏自适应布局(两边宽度固定,中间自适应)
所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性...转载 2018-05-30 22:46:48 · 4249 阅读 · 0 评论 -
devicePixelRatio && dip
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2568本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被...转载 2018-06-27 11:47:49 · 203 阅读 · 0 评论 -
从设备像素比到移动适配
一.设备像素比(device pixel ratio )视觉稿在前端开发之前,我们会有一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667)。对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大...转载 2018-06-27 12:09:35 · 275 阅读 · 0 评论 -
flex语法
网页布局(layout)是 CSS 的一个重点应用。 ...转载 2018-06-27 23:53:27 · 200 阅读 · 0 评论 -
flex实战例子
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的...转载 2018-06-28 00:16:13 · 3503 阅读 · 1 评论 -
flex布局实例
转自:https://juejin.im/post/5bee3192e51d454a9c551b3f 前言 基于前一篇文章关于 Flex 语法知识的梳理,这篇文章整理出一些常见的 Flex 布局解决方案。实现方式仁者见仁,欢迎大家评论区指正交流。文中的案例主要包含以下几个方面:元素垂直居中布局两栏布局三栏布局现代浏览器都支持 Flex Box 语法,可以放心使用: 正文 在开始之前,还是把这...转载 2018-12-19 16:43:12 · 290 阅读 · 0 评论