开始采用js,获取屏幕宽度,按宽高比来设置图片大小。var wid = window.screen.width;
wid = wid * 0.85;
$(‘.Img‘).css(‘width‘,wid+‘px‘);
$(‘.Img‘).css(‘height‘,wid/15*26+‘px‘);手机端/电脑测试都没问题,但是用微信电脑版自带浏览器打开时会变形,因为其屏幕宽度为1920。解决:用css.img{width:90%; //不设置高度,让其自适应
} 原文:https://www.cnblogs.com/linjiangxian/p/11464672.html
CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉。CSS实现三角形:<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow; margin:0 auto; }</style> 原文:https:...
视口单位(Viewport units)什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的...
今天在做一个水平居中的div内部元素贴边水平均匀布局(有点绕,直接看图吧),一开始使用的都是一些比较常用的css+html方法来实现布局,感觉这样很死板(在多增加一个div,并未div设置相应的一个负的margin-left,此值需要通过计算得到),于是便想到了css3的flex流式布局,于是上网找了一些资料:1、css3 flex一旦一个容器赋予了display:flex属性,将会有以下特点:项目无法设置浮动。列表的样式会被清除。无法使用vertical-align...
原文来源:http://webdesignerwall.com翻译:http://xinyo.org当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看...
1,fill-available表示撑满可用空间(包括高度,宽度),下面一个栗子,表示下<style type="text/css"> .box{ width: 60%; height: 500px; border: 1px solid #f00; margin: 20px auto 0; } .son{ width: -webkit-fill-available; background: #ff0; height:200px;/*高也可以是fill-available*/ } </style><div class="box"> <div class="son"></div></div>2,f...
左侧定宽,右侧自适应有很多种方法可以实现缩小窗口试试看? 方案一:左边左浮动,右边加个margin-left查看 demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽,右侧自适应(1)</title><...
viewpointcss3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。“viewpoint” = window sizevw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+DEMO地址:http://qianduannotes.sinaapp.com/test/fontResize.html (已经用JS修正重绘bug)<!DOCTYPE HTML>
<html>
<head> <meta charset="UTF-8...
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。媒体查询可用于检测很多事情,例如:viewport(视窗) 的宽度...
我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代码,才能实现我们想要的效果。今天突发奇想,使用了纯css实现了我想要的效果,下面就和大家来分享,上代码;<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
tips:css中“>”是: css3特有的选择器,A>B 表示选择A元素的所有子B元素。 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。 .a,.b{逗号指相同的css样式};.a .b{空格指后代元素};.a>.b{大于号指子代元素}; 一、浮动解决方案代码:<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compati...
好久没发了 ,今天刚学了点东东,顺便挖过来,happy一下 第一种:代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.div1{width:30%;padding-bottom:32767px;margin-bottom:-32767px;float:left}
.div2{width:40%;paddin...
<div class="ndyqfd_table"> <div class="ndyqfd_table_box"> <ul class="ndyqfd_ul"> <li class="ndyqfd_state">得分率</li> <li class="ndyqfd_state">难易度</li> <li class="ndyqfd_state">区分度</li> <li class="ndyqfd_state">题号</li> </ul> <ul class="ndyqfd_ul" ng-repeat="list in quFenAndDifficultDegreeList"> <li class="ndyqfd...
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone4/4s */}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone5 */
}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2) {/* 兼容iphone 6 */
} 原文:http://www.cnblogs.com/sunbey/p/5251124.html
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式)HTML:<div class="container"><div class="left">左侧固定宽度200px</div><div class="right">右侧自适应</div></div>No1:方法一.container{width: 100%; }
.left{color:red...