轩枫阁

轩枫阁V3主题开发-开发篇

前言

本文介绍关于轩枫阁V3主题开发内容,分为移动端和PC端。

移动端

针对移动端主题的开发处理主要有表格滚动条、纯文本简介、搜索标签、文件模块、loading加载、判断页面类型、微信图片预览等。

表格处理

文章里面的表格,经常宽度会大于移动设备屏幕的宽度,所以给表格加上滚动条尤为重要。

WP在编辑文章插入表格时,会插入table标签,外层并没有特殊的class来标记含有表格,所以无法直接通过CSS的方式加上横向滚动条。

1. JS判断表格,给外层加上指定Class。这种方法实现的会比较不友好。

2. 通过PHP给table表格加上class 查看全文

2016/09 06  周二

轩枫阁V3主题开发-重构篇

前言

轩枫阁V3主题已上线,本文将介绍本站V3主题关于CSS重构的内容。兼容IE9+,主要看Chrome表现。

LESS

鉴于Less能满足本站主题开发的需求,就没有更换成Sass。Less介绍:http://www.lesscss.net/

mixins

基于 LessCSS代码片段复用和混入库,主要有圆角border-radius、渐变gradient、内阴影inner-shadow、阴影box-shadow、动画animation、transition、宽度计算calc-width、省略text-overflow等,代码见附录。 查看全文

2016/09 03  周六

高清ICON SVG解决方案

前言

随着硬件快速的发展,Retina技术发展至今,目前Google Nexus6的devicePixelRatio已经到了3.5,虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主,但是为了更好的用户体验,前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。

1.多倍图片

目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍,devicePixelRatio= 3就做三倍,有些人可能会直接做3倍的图片,这样就可以同时兼容devicePixelRatio = 2 ,但是这样其实对于devicePixelRatio = 1devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片,所以为了提升用户体验,一般我们会分开做几套图片,根据用用户的devicePixelRatio判断让他们加载对应的图片。

2.iconfont字体图标

在很多国外的响应式站点里一般会采用iconfont,因为可以直接通过font-size和color属性来控制icon的大小和颜色,非常方便,而且由于iconfont本身就是字体文件,会矢量适配各种不同devicePixelRatio,但是在PC上当图标小于等于16px时,或者复杂度高的图标会出现比较严重锯齿,图标无法展示清晰,特别在chrome下的表现尤为严重。

正因为如此这个技术在推进过程中遇到许多困难,因为在很多场景下图标确实会较小甚至小于16px,而且有些16px的图标如果复杂度较高,iconfont实现出来的icon会经常出现看不清的情况,而且国内PC用户是占最多的,所以iconfont的这种表现效果很多用户和设计师无法接受。 查看全文

2015/11 21  周六

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]