网站建设资讯

成都响应式网站建设:介绍几个方法来构建你自己的响应式
作者: 桔子建站   时间: 2017-08-31   阅读:   0

主要介绍几个方法来构建你自己的响应式元素和媒介。

\

图像缩放

通过 html 缩小图像,图片像素不会减少,通过工具缩小图片则会失真。 
1. 基于百分比 max-width:100%
2. 利用 cookie 传送屏幕大小决定后台传送图片的大小。 
3. 基于媒介查询 @media

视频缩放

  1. html5 
    类似于 基于百分比设置图像缩放 max-width:100%

  2. object

  3. iframe

基于媒介查询的动态导航栏

@media screen and ( max-width:800px ) {    .small=menu { display:inline; }     .large-menu { display:none; }}12341234

基于尺寸的响应式边距

通过内边距除以总屏幕宽度得到响应式百分比。 
padding:4%;

基于 css3 动画的按钮

背景: -webkit-gradient-webkit-linear-gradient
jQuery动画:$('.class').animate
阴影: -webkit-box-shadow

第2章 响应式字体

简介

主要介绍怎样创建响应式字体和美化字体。涉及 HTML5画布元素和 CSS3的知识。 ps 和 fireworks 在缩小图片后还可以进一步优化大小。

响应式字体

rem

@media screen and (orientation:portrait) {    p.a{font-size:3rem;}}@media screen and (orientation:landscape) {    p.a{font-size:1rem;}}123456123456

使用画布实现文字阴影、内侧,外侧阴影、旋转文本

画布无法直接实现内侧阴影效果,使用 stroke方法可模拟内侧阴影。

使用 css3 旋转文本、制作 3D 文本、文本遮罩的文本纹理

旋转文本:-webkit-transform
3D文本:

text-shadow: 0px 0px 0px #666,             -1px -1px 0px #666,             -2px -2px 0px #666,              ...12341234

文本遮罩的文本纹理:-webkit-mask-image

基于位置的伪类

li:nth-of-type(odd){    background:red;    color:white;}12341234
h1:before{    content:"#";}123123

为字体添加阴影效果

text-shadow
dropshadow

圆角边框半径

border-radius

本文是成都响应式网站建设响应式网站制作成都高端网站建设与品牌网站策划服务-桔子科技公司为您整理!响应式网站建设,响应式网站制作,响应式网站开发,HTML5网站建设,成都响应式网站建设,成都响应式网站制作,成都响应式网站开发,桔子建站。


隐藏