婚纱网站建设案例,做网站用什么云服务器吗,查网站是不是用shopify做的,网页版微博1 移动端页面制作规范 1.1 计量单位的使用
CSS 的计量单位选择 px#xff1a;固定的像素值em#xff1a;相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值#xff0c;如父节点的 font-size:10px#xff0c;当前节点的 font-size:1.2em#xff0c;则当前节…1 移动端页面制作规范 1.1 计量单位的使用
CSS 的计量单位选择 px固定的像素值em相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值如父节点的 font-size:10px当前节点的 font-size:1.2em则当前节点的 font-size 实为 12pxrem相对根节点 html 的 font-size 设置来作为当前元素 1rem 所代表的像素值与 em 的区别就是 rem 的基本度量单位与父节点无关只与根节点 font-size 的设置有关如设置 html{font-size:10px;} 后当前 dom 所有节点的 1rem 都表示 10pxvm/vh表示视区宽度/高度视区总宽度为 100vw总高度为 100vh 移动端开发中我们使用 rem 作为基本计量单位同时将根节点默认字号大小设为 font-size:62.5%因移动端浏览器默认字号大小为 16px16*62.5% 刚好为 10px
html {/* 相当于 10px */font-size: 62.5%;
}/* #example 的字体大小为 12px*/
#example {font-size: 1.2rem
}/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {font-size: 1.4rem;width: 10rem;height: 10rem
}安卓下textarea标签的内容字体大小不支持 rem 设置 1.2 移动端开发细节和优化
在移动端使用新的 CSS3 样式代替原来在 PC 上的开发习惯
在宽度为100%的布局中实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等考虑使用 flex 布局垂直居中使用 flex 实现垂直居中尽量使用 border-radiusbox-shadowtext-shadow 等 CSS3 样式实现诸如圆角、渐变色、盒子投影、字体投影等减少使用图片对于单色的 icon 图标利用 字体图标 导入这样的话可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果如投影等而不再需要每一种颜色就需要切一份图片利用 transform:rotate(90deg) 来获取旋转了不同角度的 icon避免每个角度需要切一张图片在动画中利用 CSS3 动画属性如 transform:translate(x,y) 来改变元素的偏移位置减少使用 left 和 top 来做位移动画
2 图片模糊处理
理论上1个位图像素对应于1个物理像素图片才能得到完美清晰的展示。
对于高清屏而言1个位图像素对应于4个物理像素由于单个位图像素不可以再进一步分割所以导致图片看起来比较模糊。
对于图片模糊问题比较好的方案就是用多倍图片(2x)。
如一个 200×300(CSS pixel)的 img 标签对于 dpr2 的屏幕用 400×600 的图片如此一来位图像素点个数就是原来的4 倍在高清屏幕下位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例图片自然就清晰了。
2.1 多倍图
多倍图的作用是为了使图片在移动端中正常清晰的显示。
叫多倍图的原因就是不同的移动设备屏幕分辨率不同。比如说二倍图、三倍图、四倍图等这些就是多倍图。这里介绍一下二倍图其他的多倍图都是同样的原理。
2.1.1 二倍图
直接使用普通图片和使用二倍图呈现的图片的清晰度区别。直接使用原图片直接丢到移动端页面的可以很明显的看出图片的边缘有锯齿状。
进行压缩通过二倍图方式显示的图片相比之下则清晰了很多。这就是多倍图的效果。
二倍图实质就是使用原先位置大小二倍的图片进行填充在进行放大后仍以正常清晰度显示。
2.2 SVG 矢量图
网页中的图片大部分都是基于像素处理的当放大时会失真变得模糊。
可缩放矢量图形Scalable Vector GraphicsSVG是一种开放标准的描述矢量图形的语言它基于XML可扩展标记语言的SVG 矢量图形是可伸缩的可在任何的分辨率下被高质量地打印可在图像质量不下降的情况下被放大。
2.2.1 SVG 标签和样式
SVG使用标签的方式定义各种图形外层标签是 svgviewBox可以定义用来观察SVG视图的一个矩形区域它的属性主要包括x、y、width、height用数字表示每个数字之间用空格或逗号隔开表示定义一个在左上角(x, y)坐标位置宽度为width高度为height的矩形。常用属性如表所示。
属性说明width用来控制 SVG 视图的宽度height用来控制 SVG 视图的高度viewBox定义用户视野的位置及大小
在 svg 标签的内部可以使用SVG提供的一些预定义的标签来绘制图形或者绘制文字。常用的内部标签如表所示。
标签名说明rect矩形标签circle圆形标签ellipse椭圆形标签line线段标签polyline折线标签polygon多边形标签path路径标签text文字标签tspan类似span用在text内部单独设置样
SVG 常用的内部标签还可以通过属性来设置样式常用的属性如表所示。
属性名属性值说明fillString定义填充颜色以及文字颜色fill-opacity0~1之间的浮点数定义填充颜色的透明度strokeString定义描边的颜色stroke-width大于0的浮点数定义描边的宽度stroke-opacity0~1之间的浮点数定义描边的颜色的透明度opacity0~1之间的浮点数定义整个图形元素的透明度transformtranslate(x, y)平移transformscale(x, y)缩放transformrotate(angle, [cx, cy])旋转transformskewX(angel) skewY(angel)倾斜
!-- 定义一个圆形 --
svg width100% height100%circle cx100 cy50 r40 strokeblack stroke-width2 fill#ddd/
/svg!-- 定义一个外部svg --
?xml version1.0 standaloneno?
!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
svg width100% height100% version1.1 xmlnshttp://www.w3.org/2000/svgcircle cx100 cy50 r40 strokeblack stroke-width2 fill#ddd /
/svg3 练习作业
使用多倍图解决移动端图片模糊问题。使用 SVG 实现矢量图引入。
