响应式网页怎么切图才能规范

2019-06-10

有些朋友切响应式网页比较头痛,因为响应式网页要适应各种分辨率,这使得往往那些只会PC的人来说,显得有点难,终究还是没明白怎么切更快,更专业。

这里介绍一个经典的框架bootstrap框架,这个框架切响应式网页非常简单,响应式网页核心的就是栅格化布局,以前写的px像素(除了字体大小)真的很少用,取而代之的是百分比,有些朋友会说那手机端怎么写呢?有些朋友还是在手机端写rem,大部分客户要求真的没有那么高,你这样写无非加重了你的工作量,每个单位在手机屏幕时候还要写rem是不是很麻烦,如果写规范了百分比和字体px,其实手机端很容易写的。

我们说具体一点,以一个1000px宽度为设计图标准宽度为例:

一行四个怎么写?

25%不就是4个吗,每个子元素写宽度25%,就可以实现1行四个,而且任何分辨率都不用改,25%是个相对值,如果你写250px,那么小于1000px的分辨率下是否又要去单独定义一个具体的宽度呢?是不是增加了代码和工作量了?这个是最基础的。
想在小于1000px下写一行2个怎么写

@media (max-width:1000px){
 宽度:50%


很简单吧,这点数学计算我就不用教了吧

到手机屏幕怎么写
@media (max-width:768px){}
我们不用考虑手机屏幕是多大尺寸,总之苹果手机都是768内的,而且电脑版我们不用考虑768的分辨率,因为根本没有这个尺寸的屏幕。所有字体单位用电脑的字体px就可以了。

有些人不用框架写,其实都可以,框架无非就是让你工作变得简单,如果你的项目不适合用框架开发,那么自己写原生的html5代码也是可以的,无非稍微多一点工作而已,自己定义好一些宏观的条件,比如宽度,字体大小这些宏观定义。
我们有时候写项目时候也不用框架,因为有些项目根本不适用,你引入了框架文件也没用,因为代码根本不会用到那些效果,所以说还是要结合项目的条件来处理具体事情。

宏观条件比如说字体:

.font-big{font-size:40px}
.font-small{font-size:16px}

@media (max-width:1000px){
.font-big{font-size:20px}
.font-small{font-size:12px}


结合你实际项目情况,如果用的比较重复的地方比如标题的字体你发现都是一样的40号字体,那么你先定义好宏观的字体大小,然后在小分辨率下去修改这些字体大小,就会比较统一,代码就会减少,从而提高你的效率。

其他的请举一反三了。